@semcore/tab-panel 16.0.11 → 17.0.0-prerelease.17

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.0] - 2026-02-18
+
+### BREAK
+
+- New major version.
+
 ## [16.0.11] - 2025-10-29
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 [![version](https://img.shields.io/npm/v/@semcore/tab-panel.svg)](https://www.npmjs.com/@semcore/tab-panel)
 [![downloads](https://img.shields.io/npm/dt/@semcore/tab-panel.svg)](https://www.npmjs.com/package/@semcore/tab-panel)
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
 
 > This component is part of the Intergalactic Design System
 
@@ -20,13 +20,13 @@ npm install @semcore/tab-panel
 
 ## 👤 Author
 
-[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
-Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
 
 ## Show your support
 
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
 
 ## 📝 License
 
-This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.

package/lib/cjs/TabPanel.js

@@ -1,34 +1,30 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTabPanel = 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.wrapTabPanel = exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
 var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
-var _flexBox = require("@semcore/flex-box");
+var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_1sxgd_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1sxgd_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1sxgd_gg_ .___SText_1sxgd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1sxgd_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1sxgd_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1sxgd_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1sxgd_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SAddon_1sxgd_gg_,.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SText_1sxgd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_::after{border-bottom:none}.___SText_1sxgd_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1sxgd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1sxgd_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1sxgd_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_1w4cf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1w4cf_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1w4cf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1w4cf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1w4cf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1w4cf_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SAddon_1w4cf_gg_,.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SText_1w4cf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_::after{border-bottom:none}.___SText_1w4cf_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1w4cf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1w4cf_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_1sxgd_gg_",
-  "__SAddon": "___SAddon_1sxgd_gg_",
-  "__STabPanel": "___STabPanel_1sxgd_gg_",
-  "__STabPanelItem": "___STabPanelItem_1sxgd_gg_",
-  "_disabled": "__disabled_1sxgd_gg_",
-  "_selected": "__selected_1sxgd_gg_"
+  "__SText": "___SText_1w4cf_gg_",
+  "__SAddon": "___SAddon_1w4cf_gg_",
+  "__STabPanel": "___STabPanel_1w4cf_gg_",
+  "__STabPanelItem": "___STabPanelItem_1w4cf_gg_",
+  "_disabled": "__disabled_1w4cf_gg_",
+  "_selected": "__selected_1w4cf_gg_"
 });
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
+const optionsA11yEnhance = {
+  onNeighborChange: (neighborElement, props) => {
     if (neighborElement) {
       neighborElement.focus();
       if (props.behavior === 'auto') {
@@ -38,115 +34,138 @@ var optionsA11yEnhance = {
   },
   childSelector: ['role', 'tab']
 };
-var TabPanelRoot = /*#__PURE__*/function (_Component) {
-  function TabPanelRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, TabPanelRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, TabPanelRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "handleClick", function (value) {
-      return function (event) {
-        _this.handlers.value(value, event);
-      };
+class TabPanelRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "buttonRefsList", []);
+    (0, _defineProperty2.default)(this, "handleClick", value => event => {
+      this.handlers.value(value, event);
     });
-    (0, _defineProperty2["default"])(_this, "handleKeyDown", function (value) {
-      return function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          _this.handlers.value(value, event);
-        }
-      };
+    (0, _defineProperty2.default)(this, "handleKeyDown", value => event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.handlers.value(value, event);
+      }
     });
-    return _this;
   }
-  (0, _inherits2["default"])(TabPanelRoot, _Component);
-  return (0, _createClass2["default"])(TabPanelRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: null
-      };
-    }
-  }, {
-    key: "getItemProps",
-    value: function getItemProps(props, _index) {
-      var value = this.asProps.value;
-      var isSelected = value === props.value;
-      return {
-        'selected': isSelected,
-        'onClick': this.handleClick(props.value),
-        'onKeyDown': this.handleKeyDown(props.value),
-        'tabIndex': isSelected ? 0 : -1,
-        'aria-selected': isSelected
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref5;
-      var STabPanel = _flexBox.Box;
-      var styles = this.asProps.styles;
-      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanel, _ref5.cn("STabPanel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  getItemProps(props, index) {
+    const {
+      value
+    } = this.asProps;
+    const isSelected = value === props.value;
+    return {
+      'selected': isSelected,
+      'onClick': this.handleClick(props.value),
+      'onKeyDown': this.handleKeyDown(props.value),
+      'tabIndex': isSelected ? 0 : -1,
+      'aria-selected': isSelected,
+      'buttonRefsList': this.buttonRefsList,
+      index
+    };
+  }
+  getItemTextProps(_, index) {
+    return {
+      buttonRefsList: this.buttonRefsList,
+      index
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref5;
+    const STabPanel = _baseComponents.Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STabPanel, _ref5.cn("STabPanel", {
+      ...(0, _core.assignProps)({
         "role": 'tablist'
-      }, _ref))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(TabPanelRoot, "displayName", 'TabPanel');
-(0, _defineProperty2["default"])(TabPanelRoot, "style", style);
-(0, _defineProperty2["default"])(TabPanelRoot, "defaultProps", {
+      }, _ref)
+    }));
+  }
+}
+(0, _defineProperty2.default)(TabPanelRoot, "displayName", 'TabPanel');
+(0, _defineProperty2.default)(TabPanelRoot, "style", style);
+(0, _defineProperty2.default)(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: 'manual'
 });
-(0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
+(0, _defineProperty2.default)(TabPanelRoot, "enhance", [(0, _a11yEnhance.default)(optionsA11yEnhance)]);
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;
-  var STabPanelItem = _flexBox.Box;
-  var Children = props.Children,
-    styles = props.styles,
-    addonLeft = props.addonLeft,
-    addonRight = props.addonRight;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "type": 'button',
-    "tag": 'button',
-    "tabIndex": 0,
-    "role": 'tab'
-  }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
+  const STabPanelItem = _baseComponents.Box;
+  const {
+    Children,
+    styles,
+    addonLeft,
+    addonRight,
+    buttonRefsList,
+    index
+  } = props;
+  const buttonRef = _react.default.useRef();
+  buttonRefsList[index] = buttonRef;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STabPanelItem, _ref6.cn("STabPanelItem", {
+    ...(0, _core.assignProps)({
+      "type": 'button',
+      "tag": 'button',
+      "tabIndex": 0,
+      "role": 'tab',
+      "ref": buttonRef
+    }, _ref2)
+  }), addonLeft ? /*#__PURE__*/_react.default.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
-  }) : null, (0, _addonTextChildren["default"])(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
+  }) : null, (0, _addonTextChildren.default)(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/_react.default.createElement(TabPanel.Item.Addon, {
     tag: addonRight
   }) : null);
 }
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  var SText = _flexBox.Box;
-  var styles = props.styles;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": 'span'
-  }, _ref3))));
+  const SText = _typography.Text;
+  const {
+    styles,
+    ellipsis = true,
+    buttonRefsList,
+    index,
+    hintProps = {}
+  } = props;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SText, _ref7.cn("SText", {
+    ...(0, _core.assignProps)({
+      "size": 200,
+      "ellipsis": ellipsis,
+      "medium": true,
+      "use:hintProps": {
+        triggerRef: buttonRefsList[index],
+        ...hintProps
+      }
+    }, _ref3)
+  }));
 }
 function Addon(props) {
   var _ref4 = arguments[0],
     _ref8;
-  var SAddon = _flexBox.Box;
-  var styles = props.styles;
-  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": 'span'
-  }, _ref4))));
+  const SAddon = _baseComponents.Box;
+  const {
+    styles
+  } = props;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAddon, _ref8.cn("SAddon", {
+    ...(0, _core.assignProps)({
+      "tag": 'span'
+    }, _ref4)
+  }));
 }
-var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
+const TabPanel = (0, _core.createComponent)(TabPanelRoot, {
   Item: [TabPanelItem, {
-    Text: Text,
-    Addon: Addon
+    Text,
+    Addon
   }]
 });
-var wrapTabPanel = exports.wrapTabPanel = function wrapTabPanel(wrapper) {
-  return wrapper;
-};
-var _default = exports["default"] = TabPanel;
+const wrapTabPanel = wrapper => wrapper;
+exports.wrapTabPanel = wrapTabPanel;
+var _default = exports.default = TabPanel;
 //# sourceMappingURL=TabPanel.js.map

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["_core","require","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_flexBox","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","event","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","_index","asProps","isSelected","handleClick","handleKeyDown","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","exports","wrapper","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, _index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab'>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAH,sBAAA,CAAAF,OAAA;AAA0B;AAAA,IAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,IAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAE,SAAlBA,gBAAgBA,CAAGC,eAAe,EAAEC,KAAK,EAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,CAAC,CAAC;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAAC,IAEIC,YAAY,0BAAAC,UAAA;EAAA,SAAAD,aAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,YAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,OAAAQ,WAAA,mBAAAV,YAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAA,IAAAK,gBAAA,aAAAV,KAAA,iBAgBF,UAACW,KAAK;MAAA,OAAK,UAACC,KAAK,EAAK;QAClCZ,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC,CAAC;IAAA;IAAA,IAAAF,gBAAA,aAAAV,KAAA,mBAEe,UAACW,KAAK;MAAA,OAAK,UAACC,KAAK,EAAK;QACpC,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;UAC9CF,KAAK,CAACG,cAAc,CAAC,CAAC;UACtBf,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;QACnC;MACF,CAAC;IAAA;IAAA,OAAAZ,KAAA;EAAA;EAAA,IAAAgB,UAAA,aAAAlB,YAAA,EAAAC,UAAA;EAAA,WAAAkB,aAAA,aAAAnB,YAAA;IAAAgB,GAAA;IAAAH,KAAA,EAfD,SAAAO,iBAAiBA,CAAA,EAAG;MAClB,OAAO;QACLP,KAAK,EAAE;MACT,CAAC;IACH;EAAC;IAAAG,GAAA;IAAAH,KAAA,EAaD,SAAAQ,YAAYA,CAAC1B,KAAK,EAAE2B,MAAM,EAAE;MAC1B,IAAQT,KAAK,GAAK,IAAI,CAACU,OAAO,CAAtBV,KAAK;MACb,IAAMW,UAAU,GAAGX,KAAK,KAAKlB,KAAK,CAACkB,KAAK;MACxC,OAAO;QACL,UAAU,EAAEW,UAAU;QACtB,SAAS,EAAE,IAAI,CAACC,WAAW,CAAC9B,KAAK,CAACkB,KAAK,CAAC;QACxC,WAAW,EAAE,IAAI,CAACa,aAAa,CAAC/B,KAAK,CAACkB,KAAK,CAAC;QAC5C,UAAU,EAAEW,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;QAC/B,eAAe,EAAEA;MACnB,CAAC;IACH;EAAC;IAAAR,GAAA;IAAAH,KAAA,EAED,SAAAc,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAL,OAAA;QAAAM,KAAA;MACP,IAAMC,SAAS,GAG2BC,YAAG;MAF7C,IAAQC,MAAM,GAAK,IAAI,CAACT,OAAO,CAAvBS,MAAM;MAEd,OAAAH,KAAA,GAAO,IAAAvC,aAAO,EAAC0C,MAAM,CAAC,eAAC5C,MAAA,YAAA6C,aAAA,CAACH,SAAS,EAAAD,KAAA,CAAAK,EAAA,kBAAAC,cAAA,qBAAArD,KAAA,CAAAsD,WAAA;QAAA,QAAmB;MAAS,GAAAR,IAAA,GAAE,CAAC;IAClE;EAAC;AAAA,EA5CwBS,eAAS;AAAA,IAAAzB,gBAAA,aAA9BZ,YAAY,iBACK,UAAU;AAAA,IAAAY,gBAAA,aAD3BZ,YAAY,WAEDX,KAAK;AAAA,IAAAuB,gBAAA,aAFhBZ,YAAY,kBAGM;EACpBsC,YAAY,EAAE,IAAI;EAClBzC,QAAQ,EAAE;AACZ,CAAC;AAAA,IAAAe,gBAAA,aANGZ,YAAY,aAQC,CAAC,IAAAuC,uBAAW,EAAC/C,kBAAkB,CAAC,CAAC;AAuCpD,SAASgD,YAAYA,CAAC7C,KAAK,EAAE;EAAA,IAAA8C,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3B,IAAMC,aAAa,GAIMb,YAAG;EAH5B,IAAQc,QAAQ,GAAoClD,KAAK,CAAjDkD,QAAQ;IAAEb,MAAM,GAA4BrC,KAAK,CAAvCqC,MAAM;IAAEc,SAAS,GAAiBnD,KAAK,CAA/BmD,SAAS;IAAEC,UAAU,GAAKpD,KAAK,CAApBoD,UAAU;EAE/C,OAAAJ,KAAA,GAAO,IAAArD,aAAO,EAAC0C,MAAM,CAAC,eACpB5C,MAAA,YAAA6C,aAAA,CAACW,aAAa,EAAAD,KAAA,CAAAT,EAAA,sBAAAC,cAAA,qBAAArD,KAAA,CAAAsD,WAAA;IAAA,QAAmB,QAAQ;IAAA,OAAK,QAAQ;IAAA,YAAW,CAAC;IAAA,QAAO;EAAK,GAAAK,KAAA,KAC3EK,SAAS,gBAAG1D,MAAA,YAAA6C,aAAA,CAACe,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEL;EAAU,CAAE,CAAC,GAAG,IAAI,EAC1D,IAAAM,6BAAiB,EAACP,QAAQ,EAAEG,QAAQ,CAACC,IAAI,CAACI,IAAI,EAAEL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEH,UAAU,gBAAG3D,MAAA,YAAA6C,aAAA,CAACe,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEJ;EAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;AAEpB;AAEA,SAASM,IAAIA,CAAC1D,KAAK,EAAE;EAAA,IAAA2D,KAAA,GAAAZ,YAAA;IAAAa,KAAA;EACnB,IAAMC,KAAK,GAE2BzB,YAAG;EADzC,IAAQC,MAAM,GAAKrC,KAAK,CAAhBqC,MAAM;EACd,OAAAuB,KAAA,GAAO,IAAAjE,aAAO,EAAC0C,MAAM,CAAC,eAAC5C,MAAA,YAAA6C,aAAA,CAACuB,KAAK,EAAAD,KAAA,CAAArB,EAAA,cAAAC,cAAA,qBAAArD,KAAA,CAAAsD,WAAA;IAAA,OAAkB;EAAM,GAAAkB,KAAA,GAAE,CAAC;AAC1D;AAEA,SAASJ,KAAKA,CAACvD,KAAK,EAAE;EAAA,IAAA8D,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACpB,IAAMC,MAAM,GAE2B5B,YAAG;EAD1C,IAAQC,MAAM,GAAKrC,KAAK,CAAhBqC,MAAM;EACd,OAAA0B,KAAA,GAAO,IAAApE,aAAO,EAAC0C,MAAM,CAAC,eAAC5C,MAAA,YAAA6C,aAAA,CAAC0B,MAAM,EAAAD,KAAA,CAAAxB,EAAA,eAAAC,cAAA,qBAAArD,KAAA,CAAAsD,WAAA;IAAA,OAAkB;EAAM,GAAAqB,KAAA,GAAE,CAAC;AAC3D;AAEA,IAAMT,QAAQ,GAAG,IAAAY,qBAAe,EAAC5D,YAAY,EAAE;EAC7CiD,IAAI,EAAE,CAACT,YAAY,EAAE;IAAEa,IAAI,EAAJA,IAAI;IAAEH,KAAK,EAALA;EAAM,CAAC;AACtC,CAAC,CAAC;AAEK,IAAMW,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAIE,OAAO;EAAA,OAAKA,OAAO;AAAA;AAAC,IAAAC,QAAA,GAAAF,OAAA,cAElCd,QAAQ","ignoreList":[]}
+{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","hintProps","triggerRef","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  buttonRefsList = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_, index) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index, hintProps = {} } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium use:hintProps={{ triggerRef: buttonRefsList[index], ...hintProps }} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAH,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAEA,CAACC,eAAe,EAAEC,KAAK,KAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,CAAC,CAAC;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAED,MAAMC,YAAY,SAASC,eAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,0BAUlB,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,uBAQJC,KAAK,IAAMC,KAAK,IAAK;MAClC,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;IACnC,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,yBAEgBC,KAAK,IAAMC,KAAK,IAAK;MACpC,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC9CF,KAAK,CAACG,cAAc,CAAC,CAAC;QACtB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC;IACF,CAAC;EAAA;EAfDI,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLL,KAAK,EAAE;IACT,CAAC;EACH;EAaAM,YAAYA,CAACjB,KAAK,EAAEkB,KAAK,EAAE;IACzB,MAAM;MAAEP;IAAM,CAAC,GAAG,IAAI,CAACQ,OAAO;IAC9B,MAAMC,UAAU,GAAGT,KAAK,KAAKX,KAAK,CAACW,KAAK;IACxC,OAAO;MACL,UAAU,EAAES,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,WAAW,CAACrB,KAAK,CAACW,KAAK,CAAC;MACxC,WAAW,EAAE,IAAI,CAACW,aAAa,CAACtB,KAAK,CAACW,KAAK,CAAC;MAC5C,UAAU,EAAES,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,gBAAgB,EAAE,IAAI,CAACG,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACC,CAAC,EAAEP,KAAK,EAAE;IACzB,OAAO;MACLK,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,SAAS,GAG2BC,mBAAG;IAF7C,MAAM;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACZ,OAAO;IAE/B,OAAAS,KAAA,GAAO,IAAAjC,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACH,SAAS,EAAAD,KAAA,CAAAK,EAAA;MAAA,OAAA/C,KAAA,CAAAgD,WAAA;QAAA,QAAmB;MAAS,GAAAP,IAAA;IAAA,EAAE,CAAC;EAClE;AACF;AAAC,IAAAlB,gBAAA,CAAAC,OAAA,EAxDKL,YAAY,iBACK,UAAU;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD3BL,YAAY,WAEDX,KAAK;AAAA,IAAAe,gBAAA,CAAAC,OAAA,EAFhBL,YAAY,kBAGM;EACpB8B,YAAY,EAAE,IAAI;EAClBjC,QAAQ,EAAE;AACZ,CAAC;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EANGL,YAAY,aAQC,CAAC,IAAA+B,oBAAW,EAACvC,kBAAkB,CAAC,CAAC;AAkDpD,SAASwC,YAAYA,CAACrC,KAAK,EAAE;EAAA,IAAAsC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3B,MAAMC,aAAa,GAOMX,mBAAG;EAN5B,MAAM;IAAEY,QAAQ;IAAEX,MAAM;IAAEY,SAAS;IAAEC,UAAU;IAAErB,cAAc;IAAEL;EAAM,CAAC,GAAGlB,KAAK;EAChF,MAAM6C,SAAS,GAAGC,cAAK,CAACC,MAAM,CAAC,CAAC;EAEhCxB,cAAc,CAACL,KAAK,CAAC,GAAG2B,SAAS;EAEjC,OAAAL,KAAA,GAAO,IAAA7C,aAAO,EAACoC,MAAM,CAAC,eACpBtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACS,aAAa,EAAAD,KAAA,CAAAP,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,QAAmB,QAAQ;MAAA,OAAK,QAAQ;MAAA,YAAW,CAAC;MAAA,QAAO,KAAK;MAAA,OAAMW;IAAS,GAAAP,KAAA;EAAA,IAC1FK,SAAS,gBAAGlD,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACgB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAU,CAAE,CAAC,GAAG,IAAI,EAC1D,IAAAS,0BAAiB,EAACV,QAAQ,EAAEM,QAAQ,CAACC,IAAI,CAACI,IAAI,EAAEL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEN,UAAU,gBAAGnD,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACgB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEP;EAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;AAEpB;AAEA,SAASS,IAAIA,CAACrD,KAAK,EAAE;EAAA,IAAAsD,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACnB,MAAMC,KAAK,GAE2BC,gBAAS;EAD/C,MAAM;IAAE1B,MAAM;IAAE2B,QAAQ,GAAG,IAAI;IAAEnC,cAAc;IAAEL,KAAK;IAAEyC,SAAS,GAAG,CAAC;EAAE,CAAC,GAAG3D,KAAK;EAChF,OAAAuD,KAAA,GAAO,IAAA5D,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACwB,KAAK,EAAAD,KAAA,CAAAtB,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,QAA0B,GAAG;MAAA,YAAYwB,QAAQ;MAAA;MAAA,iBAAwB;QAAEE,UAAU,EAAErC,cAAc,CAACL,KAAK,CAAC;QAAE,GAAGyC;MAAU;IAAC,GAAAL,KAAA;EAAA,EAAG,CAAC;AAC/J;AAEA,SAASJ,KAAKA,CAAClD,KAAK,EAAE;EAAA,IAAA6D,KAAA,GAAAtB,YAAA;IAAAuB,KAAA;EACpB,MAAMC,MAAM,GAE2BjC,mBAAG;EAD1C,MAAM;IAAEC;EAAO,CAAC,GAAG/B,KAAK;EACxB,OAAA8D,KAAA,GAAO,IAAAnE,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAAC+B,MAAM,EAAAD,KAAA,CAAA7B,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,OAAkB;IAAM,GAAA2B,KAAA;EAAA,EAAE,CAAC;AAC3D;AAEA,MAAMb,QAAQ,GAAG,IAAAgB,qBAAe,EAAC3D,YAAY,EAAE;EAC7C4C,IAAI,EAAE,CAACZ,YAAY,EAAE;IAAEgB,IAAI;IAAEH;EAAM,CAAC;AACtC,CAAC,CAAC;AAEK,MAAMe,YAAY,GAAIC,OAAO,IAAKA,OAAO;AAACC,OAAA,CAAAF,YAAA,GAAAA,YAAA;AAAA,IAAAG,QAAA,GAAAD,OAAA,CAAAzD,OAAA,GAElCsC,QAAQ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n  UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps & {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n};\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\nexport type TabPanelItemProps = BoxProps & {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n};\n\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
-    return _TabPanel["default"];
+  get: function () {
+    return _TabPanel.default;
   }
 });
 var _TabPanel = _interopRequireWildcard(require("./TabPanel"));
@@ -18,7 +18,7 @@ Object.keys(_TabPanel).forEach(function (key) {
   if (key in exports && exports[key] === _TabPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _TabPanel[key];
     }
   });

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/lib/cjs/style/tab-panel.shadow.css

@@ -40,12 +40,6 @@ STabPanelItem {
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -96,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {

package/lib/es6/TabPanel.js

@@ -1,32 +1,28 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 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";
+import { Box } from '@semcore/base-components';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
 import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
-import { Box } from '@semcore/flex-box';
+import { Text as UikitText } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_1sxgd_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1sxgd_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1sxgd_gg_ .___SText_1sxgd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1sxgd_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1sxgd_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1sxgd_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1sxgd_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SAddon_1sxgd_gg_,.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SText_1sxgd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_::after{border-bottom:none}.___SText_1sxgd_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1sxgd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1sxgd_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1sxgd_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_1w4cf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1w4cf_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1w4cf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1w4cf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1w4cf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1w4cf_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SAddon_1w4cf_gg_,.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SText_1w4cf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_::after{border-bottom:none}.___SText_1w4cf_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1w4cf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1w4cf_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_1sxgd_gg_",
-  "__SAddon": "___SAddon_1sxgd_gg_",
-  "__STabPanel": "___STabPanel_1sxgd_gg_",
-  "__STabPanelItem": "___STabPanelItem_1sxgd_gg_",
-  "_disabled": "__disabled_1sxgd_gg_",
-  "_selected": "__selected_1sxgd_gg_"
+  "__SText": "___SText_1w4cf_gg_",
+  "__SAddon": "___SAddon_1w4cf_gg_",
+  "__STabPanel": "___STabPanel_1w4cf_gg_",
+  "__STabPanelItem": "___STabPanelItem_1w4cf_gg_",
+  "_disabled": "__disabled_1w4cf_gg_",
+  "_selected": "__selected_1w4cf_gg_"
 });
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
+const optionsA11yEnhance = {
+  onNeighborChange: (neighborElement, props) => {
     if (neighborElement) {
       neighborElement.focus();
       if (props.behavior === 'auto') {
@@ -36,63 +32,60 @@ var optionsA11yEnhance = {
   },
   childSelector: ['role', 'tab']
 };
-var TabPanelRoot = /*#__PURE__*/function (_Component) {
-  function TabPanelRoot() {
-    var _this;
-    _classCallCheck(this, TabPanelRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, TabPanelRoot, [].concat(args));
-    _defineProperty(_this, "handleClick", function (value) {
-      return function (event) {
-        _this.handlers.value(value, event);
-      };
+class TabPanelRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "buttonRefsList", []);
+    _defineProperty(this, "handleClick", value => event => {
+      this.handlers.value(value, event);
     });
-    _defineProperty(_this, "handleKeyDown", function (value) {
-      return function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          _this.handlers.value(value, event);
-        }
-      };
+    _defineProperty(this, "handleKeyDown", value => event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.handlers.value(value, event);
+      }
     });
-    return _this;
   }
-  _inherits(TabPanelRoot, _Component);
-  return _createClass(TabPanelRoot, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: null
-      };
-    }
-  }, {
-    key: "getItemProps",
-    value: function getItemProps(props, _index) {
-      var value = this.asProps.value;
-      var isSelected = value === props.value;
-      return {
-        'selected': isSelected,
-        'onClick': this.handleClick(props.value),
-        'onKeyDown': this.handleKeyDown(props.value),
-        'tabIndex': isSelected ? 0 : -1,
-        'aria-selected': isSelected
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref5;
-      var STabPanel = Box;
-      var styles = this.asProps.styles;
-      return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, _assignProps({
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  getItemProps(props, index) {
+    const {
+      value
+    } = this.asProps;
+    const isSelected = value === props.value;
+    return {
+      'selected': isSelected,
+      'onClick': this.handleClick(props.value),
+      'onKeyDown': this.handleKeyDown(props.value),
+      'tabIndex': isSelected ? 0 : -1,
+      'aria-selected': isSelected,
+      'buttonRefsList': this.buttonRefsList,
+      index
+    };
+  }
+  getItemTextProps(_, index) {
+    return {
+      buttonRefsList: this.buttonRefsList,
+      index
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref5;
+    const STabPanel = Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanel, _ref5.cn("STabPanel", {
+      ..._assignProps({
         "role": 'tablist'
-      }, _ref))));
-    }
-  }]);
-}(Component);
+      }, _ref)
+    }));
+  }
+}
 _defineProperty(TabPanelRoot, "displayName", 'TabPanel');
 _defineProperty(TabPanelRoot, "style", style);
 _defineProperty(TabPanelRoot, "defaultProps", {
@@ -103,17 +96,26 @@ _defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;
-  var STabPanelItem = Box;
-  var Children = props.Children,
-    styles = props.styles,
-    addonLeft = props.addonLeft,
-    addonRight = props.addonRight;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
-    "type": 'button',
-    "tag": 'button',
-    "tabIndex": 0,
-    "role": 'tab'
-  }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
+  const STabPanelItem = Box;
+  const {
+    Children,
+    styles,
+    addonLeft,
+    addonRight,
+    buttonRefsList,
+    index
+  } = props;
+  const buttonRef = React.useRef();
+  buttonRefsList[index] = buttonRef;
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", {
+    ..._assignProps2({
+      "type": 'button',
+      "tag": 'button',
+      "tabIndex": 0,
+      "role": 'tab',
+      "ref": buttonRef
+    }, _ref2)
+  }), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
     tag: addonRight
@@ -122,29 +124,45 @@ function TabPanelItem(props) {
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  var SText = Box;
-  var styles = props.styles;
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps3({
-    "tag": 'span'
-  }, _ref3))));
+  const SText = UikitText;
+  const {
+    styles,
+    ellipsis = true,
+    buttonRefsList,
+    index,
+    hintProps = {}
+  } = props;
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
+    ..._assignProps3({
+      "size": 200,
+      "ellipsis": ellipsis,
+      "medium": true,
+      "use:hintProps": {
+        triggerRef: buttonRefsList[index],
+        ...hintProps
+      }
+    }, _ref3)
+  }));
 }
 function Addon(props) {
   var _ref4 = arguments[0],
     _ref8;
-  var SAddon = Box;
-  var styles = props.styles;
-  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, _assignProps4({
-    "tag": 'span'
-  }, _ref4))));
+  const SAddon = Box;
+  const {
+    styles
+  } = props;
+  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref8.cn("SAddon", {
+    ..._assignProps4({
+      "tag": 'span'
+    }, _ref4)
+  }));
 }
-var TabPanel = createComponent(TabPanelRoot, {
+const TabPanel = createComponent(TabPanelRoot, {
   Item: [TabPanelItem, {
-    Text: Text,
-    Addon: Addon
+    Text,
+    Addon
   }]
 });
-export var wrapTabPanel = function wrapTabPanel(wrapper) {
-  return wrapper;
-};
+export const wrapTabPanel = wrapper => wrapper;
 export default TabPanel;
 //# sourceMappingURL=TabPanel.js.map

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Box","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","value","event","handlers","key","preventDefault","_inherits","_createClass","uncontrolledProps","getItemProps","_index","asProps","isSelected","handleClick","handleKeyDown","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, _index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab'>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","hintProps","_assignProps3","triggerRef","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  buttonRefsList = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_, index) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index, hintProps = {} } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium use:hintProps={{ triggerRef: buttonRefsList[index], ...hintProps }} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n  UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps & {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n};\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\nexport type TabPanelItemProps = BoxProps & {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n};\n\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/style/tab-panel.shadow.css

@@ -40,12 +40,6 @@ STabPanelItem {
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -96,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {

package/lib/esm/TabPanel.mjs

@@ -1,34 +1,30 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
 import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
-import { Box } from "@semcore/flex-box";
+import { Text as Text$1 } from "@semcore/typography";
 import React from "react";
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabPanel_1sxgd_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1sxgd_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1sxgd_gg_ .___SText_1sxgd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1sxgd_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1sxgd_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1sxgd_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1sxgd_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SAddon_1sxgd_gg_,.___STabPanelItem_1sxgd_gg_.__disabled_1sxgd_gg_ .___SText_1sxgd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1sxgd_gg_.__selected_1sxgd_gg_::after{border-bottom:none}.___SText_1sxgd_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1sxgd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1sxgd_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1sxgd_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
+    '.___STabPanel_1w4cf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1w4cf_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1w4cf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1w4cf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1w4cf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1w4cf_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SAddon_1w4cf_gg_,.___STabPanelItem_1w4cf_gg_.__disabled_1w4cf_gg_ .___SText_1w4cf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1w4cf_gg_.__selected_1w4cf_gg_::after{border-bottom:none}.___SText_1w4cf_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1w4cf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1w4cf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
     /*__inner_css_end__*/
-    "1sxgd_gg_"
+    "1w4cf_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SText": "___SText_1sxgd_gg_",
-    "__SAddon": "___SAddon_1sxgd_gg_",
-    "__STabPanel": "___STabPanel_1sxgd_gg_",
-    "__STabPanelItem": "___STabPanelItem_1sxgd_gg_",
-    "_disabled": "__disabled_1sxgd_gg_",
-    "_selected": "__selected_1sxgd_gg_"
+    "__SText": "___SText_1w4cf_gg_",
+    "__SAddon": "___SAddon_1w4cf_gg_",
+    "__STabPanel": "___STabPanel_1w4cf_gg_",
+    "__STabPanelItem": "___STabPanelItem_1w4cf_gg_",
+    "_disabled": "__disabled_1w4cf_gg_",
+    "_selected": "__selected_1w4cf_gg_"
   })
 );
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
+const optionsA11yEnhance = {
+  onNeighborChange: (neighborElement, props) => {
     if (neighborElement) {
       neighborElement.focus();
       if (props.behavior === "auto") {
@@ -38,62 +34,59 @@ var optionsA11yEnhance = {
   },
   childSelector: ["role", "tab"]
 };
-var TabPanelRoot = /* @__PURE__ */ (function(_Component) {
-  function TabPanelRoot2() {
-    var _this;
-    _classCallCheck(this, TabPanelRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, TabPanelRoot2, [].concat(args));
-    _defineProperty(_this, "handleClick", function(value) {
-      return function(event) {
-        _this.handlers.value(value, event);
-      };
+class TabPanelRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "buttonRefsList", []);
+    _defineProperty(this, "handleClick", (value) => (event) => {
+      this.handlers.value(value, event);
     });
-    _defineProperty(_this, "handleKeyDown", function(value) {
-      return function(event) {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          _this.handlers.value(value, event);
-        }
-      };
+    _defineProperty(this, "handleKeyDown", (value) => (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handlers.value(value, event);
+      }
     });
-    return _this;
   }
-  _inherits(TabPanelRoot2, _Component);
-  return _createClass(TabPanelRoot2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: null
-      };
-    }
-  }, {
-    key: "getItemProps",
-    value: function getItemProps(props, _index) {
-      var value = this.asProps.value;
-      var isSelected = value === props.value;
-      return {
-        "selected": isSelected,
-        "onClick": this.handleClick(props.value),
-        "onKeyDown": this.handleKeyDown(props.value),
-        "tabIndex": isSelected ? 0 : -1,
-        "aria-selected": isSelected
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref5;
-      var STabPanel = Box;
-      var styles = this.asProps.styles;
-      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, assignProps({
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  getItemProps(props, index) {
+    const {
+      value
+    } = this.asProps;
+    const isSelected = value === props.value;
+    return {
+      "selected": isSelected,
+      "onClick": this.handleClick(props.value),
+      "onKeyDown": this.handleKeyDown(props.value),
+      "tabIndex": isSelected ? 0 : -1,
+      "aria-selected": isSelected,
+      "buttonRefsList": this.buttonRefsList,
+      index
+    };
+  }
+  getItemTextProps(_, index) {
+    return {
+      buttonRefsList: this.buttonRefsList,
+      index
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref5;
+    const STabPanel = Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", {
+      ...assignProps({
         "role": "tablist"
-      }, _ref))));
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }));
+  }
+}
 _defineProperty(TabPanelRoot, "displayName", "TabPanel");
 _defineProperty(TabPanelRoot, "style", style);
 _defineProperty(TabPanelRoot, "defaultProps", {
@@ -103,14 +96,26 @@ _defineProperty(TabPanelRoot, "defaultProps", {
 _defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
 function TabPanelItem(props) {
   var _ref2 = arguments[0], _ref6;
-  var STabPanelItem = Box;
-  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight;
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, assignProps({
-    "type": "button",
-    "tag": "button",
-    "tabIndex": 0,
-    "role": "tab"
-  }, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
+  const STabPanelItem = Box;
+  const {
+    Children,
+    styles,
+    addonLeft,
+    addonRight,
+    buttonRefsList,
+    index
+  } = props;
+  const buttonRef = React.useRef();
+  buttonRefsList[index] = buttonRef;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", {
+    ...assignProps({
+      "type": "button",
+      "tag": "button",
+      "tabIndex": 0,
+      "role": "tab",
+      "ref": buttonRef
+    }, _ref2)
+  }), addonLeft ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
     tag: addonRight
@@ -118,29 +123,45 @@ function TabPanelItem(props) {
 }
 function Text(props) {
   var _ref3 = arguments[0], _ref7;
-  var SText = Box;
-  var styles = props.styles;
-  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
-    "tag": "span"
-  }, _ref3))));
+  const SText = Text$1;
+  const {
+    styles,
+    ellipsis = true,
+    buttonRefsList,
+    index,
+    hintProps = {}
+  } = props;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", {
+    ...assignProps({
+      "size": 200,
+      "ellipsis": ellipsis,
+      "medium": true,
+      "use:hintProps": {
+        triggerRef: buttonRefsList[index],
+        ...hintProps
+      }
+    }, _ref3)
+  }));
 }
 function Addon(props) {
   var _ref4 = arguments[0], _ref8;
-  var SAddon = Box;
-  var styles = props.styles;
-  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
-    "tag": "span"
-  }, _ref4))));
+  const SAddon = Box;
+  const {
+    styles
+  } = props;
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", {
+    ...assignProps({
+      "tag": "span"
+    }, _ref4)
+  }));
 }
-var TabPanel = createComponent(TabPanelRoot, {
+const TabPanel = createComponent(TabPanelRoot, {
   Item: [TabPanelItem, {
     Text,
     Addon
   }]
 });
-var wrapTabPanel = function wrapTabPanel2(wrapper) {
-  return wrapper;
-};
+const wrapTabPanel = (wrapper) => wrapper;
 export {
   TabPanel as default,
   wrapTabPanel

package/lib/esm/style/tab-panel.shadow.css

@@ -40,12 +40,6 @@ STabPanelItem {
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -96,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {

package/lib/types/index.d.ts

@@ -1,13 +1,9 @@
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
+import type { Box, BoxProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type React from 'react';
 
 export type TabPanelValue = string | number | boolean;
 
-/** @deprecated */
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>
-  extends TabPanelProps<T>,
-  UnknownProperties {}
 export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {
   /** Is invoked when changing the selection */
   onChange?:
@@ -28,8 +24,6 @@ export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps &
   behavior?: 'auto' | 'manual';
 };
 
-/** @deprecated */
-export interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}
 export type TabPanelItemProps = BoxProps & {
   /** Makes a tab selected. This property is determined automatically depending on the value. */
   selected?: boolean;
@@ -43,14 +37,10 @@ export type TabPanelItemProps = BoxProps & {
   addonRight?: React.ElementType;
 };
 
-/** @deprecated */
-export interface ITabPanelContext extends TabPanelContext, UnknownProperties {}
 export type TabPanelContext = {
   getItemProps: PropGetterFn;
 };
 
-/** @deprecated */
-export interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}
 export type TabPanelHandlers = {
   value: (value: TabPanelValue) => void;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "16.0.11",
+  "version": "17.0.0-prerelease.17",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.11"
+    "@semcore/typography": "^16.3.3-prerelease.17"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^17.0.0-prerelease.17"
   },
   "repository": {
     "type": "git",
@@ -25,9 +25,10 @@
     "directory": "semcore/tab-panel"
   },
   "devDependencies": {
-    "@semcore/core": "16.5.1",
+    "@semcore/core": "17.0.0-prerelease.17",
+    "@semcore/base-components": "17.0.0-prerelease.17",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "16.7.2"
+    "@semcore/icon": "16.7.2-prerelease.17"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js && pnpm vite build"