@semcore/tab-line 16.0.0-prerelease.4 → 16.0.0-prerelease.7

package/lib/esm/TabLine.mjs

@@ -1,201 +1,248 @@
-import u from "@babel/runtime/helpers/esm/objectSpread2";
-import x from "@babel/runtime/helpers/esm/classCallCheck";
-import y from "@babel/runtime/helpers/esm/createClass";
-import d from "@babel/runtime/helpers/esm/assertThisInitialized";
-import I from "@babel/runtime/helpers/esm/inherits";
-import C from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as h, createComponent as w, assignProps as b, Component as k } from "@semcore/core";
-import c from "react";
-import { Box as p } from "@semcore/flex-box";
-import P from "@semcore/core/lib/utils/addonTextChildren";
-import R from "@semcore/core/lib/utils/enhances/a11yEnhance";
-import L from "@semcore/neighbor-location";
-var z = (
+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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
+import NeighborLocation from "@semcore/neighbor-location";
+var style = (
   /*__reshadow_css_start__*/
-  (h.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     '.___STabLine_1239i_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1239i_gg_.__underlined_1239i_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1239i_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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;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_1239i_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1239i_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1239i_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1239i_gg_::after,.___STabLineItem_1239i_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1239i_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1239i_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1239i_gg_.__selected_1239i_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1239i_gg_ .___SAddon_1239i_gg_:not(:last-child),.___STabLineItem_1239i_gg_ .___SText_1239i_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1239i_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_1239i_gg_.__selected_1239i_gg_{flex-shrink:0}.___STabLineItem_1239i_gg_.__disabled_1239i_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SText_1239i_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1239i_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1239i_gg_._size_m_1239i_gg_{height:28px;min-width:18px}.___STabLineItem_1239i_gg_._size_m_1239i_gg_ .___SText_1239i_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1239i_gg_._size_l_1239i_gg_{height:40px;min-width:26px}.___STabLineItem_1239i_gg_._size_l_1239i_gg_ .___SText_1239i_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1239i_gg_._neighborLocation_left_1239i_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1239i_gg_.__selected_1239i_gg_::after,.___STabLineItem_1239i_gg_::after,.___STabLineItem_1239i_gg_::before{transition:none}.___SCaret_1239i_gg_{display:none}}',
     "1239i_gg_"
   ), {
-    __STabLine: "___STabLine_1239i_gg_",
-    _underlined: "__underlined_1239i_gg_",
-    __SCaret: "___SCaret_1239i_gg_",
-    __STabLineItem: "___STabLineItem_1239i_gg_",
-    _selected: "__selected_1239i_gg_",
-    _disabled: "__disabled_1239i_gg_",
-    __SText: "___SText_1239i_gg_",
-    __SAddon: "___SAddon_1239i_gg_",
-    _neighborLocation_left: "_neighborLocation_left_1239i_gg_",
-    _size_m: "_size_m_1239i_gg_",
-    _size_l: "_size_l_1239i_gg_"
+    "__STabLine": "___STabLine_1239i_gg_",
+    "_underlined": "__underlined_1239i_gg_",
+    "__SCaret": "___SCaret_1239i_gg_",
+    "__STabLineItem": "___STabLineItem_1239i_gg_",
+    "_selected": "__selected_1239i_gg_",
+    "_disabled": "__disabled_1239i_gg_",
+    "__SText": "___SText_1239i_gg_",
+    "__SAddon": "___SAddon_1239i_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1239i_gg_",
+    "_size_m": "_size_m_1239i_gg_",
+    "_size_l": "_size_l_1239i_gg_"
   })
-), A = {
-  onNeighborChange: function(r, i) {
-    r && (r.focus(), i.behavior === "auto" && r.click());
+);
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
   },
   childSelector: ["role", "tab"]
-}, f = /* @__PURE__ */ function(_) {
-  I(i, _);
-  var r = C(i);
-  function i() {
-    var e;
-    x(this, i);
-    for (var t = arguments.length, n = new Array(t), o = 0; o < t; o++)
-      n[o] = arguments[o];
-    return e = r.call.apply(r, [this].concat(n)), s(d(e), "state", {
+};
+var TabLineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(TabLineRoot2, _Component);
+  var _super = _createSuper(TabLineRoot2);
+  function TabLineRoot2() {
+    var _this;
+    _classCallCheck(this, TabLineRoot2);
+    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
-    }), s(d(e), "prevValue", void 0), s(d(e), "itemRefs", {}), s(d(e), "containerRef", /* @__PURE__ */ c.createRef()), s(d(e), "animationStartTimeout", -1), s(d(e), "handleAnimationStart", function() {
-      var a;
-      ((a = e.state.animation) === null || a === void 0 ? void 0 : a.started) === !1 && e.setState({
-        animation: u(u({}, e.state.animation), {}, {
-          started: !0
-        })
-      });
-    }), s(d(e), "handleAnimationEnd", function() {
-      e.setState({
+    });
+    _defineProperty(_assertThisInitialized(_this), "prevValue", void 0);
+    _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), {}, {
+            started: true
+          })
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function() {
+      _this.setState({
         animation: null
       });
-    }), s(d(e), "bindHandlerClick", function(a) {
-      return function(l) {
-        e.handlers.value(a, l);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
+      return function(e) {
+        _this.handlers.value(value, e);
       };
-    }), e;
+    });
+    return _this;
   }
-  return y(i, [{
+  _createClass(TabLineRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         value: null
       };
     }
   }, {
     key: "componentDidUpdate",
-    value: function() {
-      this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value && this.animate(), this.prevValue = this.asProps.value;
+    value: function componentDidUpdate() {
+      if (this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value) {
+        this.animate();
+      }
+      this.prevValue = this.asProps.value;
     }
   }, {
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
       this.prevValue = this.asProps.value;
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
+    value: function componentWillUnmount() {
       clearTimeout(this.animationStartTimeout);
     }
   }, {
     key: "animate",
-    value: function() {
-      var t = this.itemRefs[this.prevValue], n = this.itemRefs[this.asProps.value], o = this.containerRef.current;
-      if (!(!t || !n || !o)) {
-        var a = o.getBoundingClientRect(), l = t.getBoundingClientRect(), g = n.getBoundingClientRect(), m = {
-          fromLeft: l.x - a.x,
-          fromWidth: l.width,
-          toLeft: g.x - a.x,
-          toWidth: g.width,
-          started: !1
-        };
-        this.setState({
-          animation: m
-        }), clearTimeout(this.animationStartTimeout), this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
-      }
+    value: function animate() {
+      var fromNode = this.itemRefs[this.prevValue];
+      var toNode = this.itemRefs[this.asProps.value];
+      var containerNode = this.containerRef.current;
+      if (!fromNode || !toNode || !containerNode) return;
+      var containerRect = containerNode.getBoundingClientRect();
+      var fromRect = fromNode.getBoundingClientRect();
+      var toRect = toNode.getBoundingClientRect();
+      var animation = {
+        fromLeft: fromRect.x - containerRect.x,
+        fromWidth: fromRect.width,
+        toLeft: toRect.x - containerRect.x,
+        toWidth: toRect.width,
+        started: false
+      };
+      this.setState({
+        animation
+      });
+      clearTimeout(this.animationStartTimeout);
+      this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
     }
   }, {
     key: "getItemProps",
-    value: function(t, n) {
-      var o = this, a = this.asProps, l = a.value, g = a.size, m = l === t.value;
+    value: function getItemProps(props, index) {
+      var _this2 = this;
+      var _this$asProps = this.asProps, value = _this$asProps.value, size = _this$asProps.size;
+      var isSelected = value === props.value;
       return {
-        size: g,
-        selected: m,
-        onClick: this.bindHandlerClick(t.value),
-        tabIndex: m ? 0 : -1,
-        "aria-selected": m,
-        ref: function(S) {
-          o.itemRefs[t.value] = S;
+        size,
+        selected: isSelected,
+        onClick: this.bindHandlerClick(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        "aria-selected": isSelected,
+        ref: function ref(node) {
+          _this2.itemRefs[props.value] = node;
         }
       };
     }
   }, {
     key: "getCaretProps",
-    value: function() {
-      var t = this.state.animation;
-      return t ? t.started ? {
-        style: {
-          left: t.toLeft,
-          width: t.toWidth
-        },
-        onTransitionEnd: this.handleAnimationEnd
-      } : {
-        style: {
-          left: t.fromLeft,
-          width: t.fromWidth
-        },
-        onTransitionEnd: this.handleAnimationEnd
-      } : {};
+    value: function getCaretProps() {
+      var animation = this.state.animation;
+      if (!animation) return {};
+      if (animation.started) {
+        return {
+          style: {
+            left: animation.toLeft,
+            width: animation.toWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      } else {
+        return {
+          style: {
+            left: animation.fromLeft,
+            width: animation.fromWidth
+          },
+          onTransitionEnd: this.handleAnimationEnd
+        };
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, n, o = p, a = "div", l = this.asProps, g = l.styles, m = l.Children, T = l.controlsLength, S = this.state.animation;
-      return n = h(g), /* @__PURE__ */ c.createElement(o, n.cn("STabLine", u({}, b({
-        role: "tablist",
-        ref: this.containerRef
-      }, t))), /* @__PURE__ */ c.createElement(L, n.cn("NeighborLocation", {
-        controlsLength: T
-      }), /* @__PURE__ */ c.createElement(m, n.cn("Children", {}))), S && /* @__PURE__ */ c.createElement(a, n.cn("SCaret", u({}, this.getCaretProps()))));
+    value: function render() {
+      var _ref = this.asProps, _ref5;
+      var STabLine = Box;
+      var SCaret = "div";
+      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, Children = _this$asProps2.Children, controlsLength = _this$asProps2.controlsLength;
+      var animation = this.state.animation;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, assignProps({
+        "role": "tablist",
+        "ref": this.containerRef
+      }, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
+        "controlsLength": controlsLength
+      }), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), animation && /* @__PURE__ */ React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
     }
-  }]), i;
-}(k);
-s(f, "displayName", "TabLine");
-s(f, "style", z);
-s(f, "defaultProps", {
+  }]);
+  return TabLineRoot2;
+}(Component);
+_defineProperty(TabLineRoot, "displayName", "TabLine");
+_defineProperty(TabLineRoot, "style", style);
+_defineProperty(TabLineRoot, "defaultProps", {
   defaultValue: null,
   size: "m",
-  underlined: !0,
+  underlined: true,
   behavior: "auto"
 });
-s(f, "enhance", [R(A)]);
-function E(_) {
-  var r = arguments[0], i = p, e = _.Children, t = _.styles, n = _.addonLeft, o = _.addonRight, a = _.neighborLocation;
-  return /* @__PURE__ */ c.createElement(L.Detect, {
-    neighborLocation: a
-  }, function(l) {
-    var g;
-    return g = h(t), /* @__PURE__ */ c.createElement(i, g.cn("STabLineItem", u({}, b({
-      tag: "button",
-      tabIndex: 0,
-      neighborLocation: l,
-      type: "button",
-      role: "tab"
-    }, r))), n ? /* @__PURE__ */ c.createElement(v.Item.Addon, {
-      tag: n
-    }) : null, P(e, v.Item.Text, v.Item.Addon), o ? /* @__PURE__ */ c.createElement(v.Item.Addon, {
-      tag: o
+_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;
+  return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
+    neighborLocation
+  }, function(neighborLocation2) {
+    var _ref6;
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, assignProps({
+      "tag": "button",
+      "tabIndex": 0,
+      "neighborLocation": neighborLocation2,
+      "type": "button",
+      "role": "tab"
+    }, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
+      tag: addonLeft
+    }) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
+      tag: addonRight
     }) : null);
   });
 }
-function N(_) {
-  var r = arguments[0], i, e = _.styles, t = p;
-  return i = h(e), /* @__PURE__ */ c.createElement(t, i.cn("SText", u({}, b({
-    tag: "span"
-  }, r))));
+function Text(props) {
+  var _ref3 = arguments[0], _ref7;
+  var styles = props.styles;
+  var SText = Box;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref3))));
 }
-function V(_) {
-  var r = arguments[0], i, e = _.styles, t = p;
-  return i = h(e), /* @__PURE__ */ c.createElement(t, i.cn("SAddon", u({}, b({
-    tag: "span"
-  }, r))));
+function Addon(props) {
+  var _ref4 = arguments[0], _ref8;
+  var styles = props.styles;
+  var SAddon = Box;
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref4))));
 }
-var v = w(f, {
-  Item: [E, {
-    Text: N,
-    Addon: V
+var TabLine = createComponent(TabLineRoot, {
+  Item: [TabLineItem, {
+    Text,
+    Addon
   }]
-}), O = function(r) {
-  return r;
+});
+var wrapTabLine = function wrapTabLine2(wrapper) {
+  return wrapper;
 };
 export {
-  v as default,
-  O as wrapTabLine
+  TabLine as default,
+  wrapTabLine
 };

package/lib/esm/index.mjs

@@ -1,5 +1,5 @@
-import { default as r, wrapTabLine as f } from "./TabLine.mjs";
+import { default as default2, wrapTabLine } from "./TabLine.mjs";
 export {
-  r as default,
-  f as wrapTabLine
+  default2 as default,
+  wrapTabLine
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "16.0.0-prerelease.4",
+  "version": "16.0.0-prerelease.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.0-prerelease.4",
-    "@semcore/neighbor-location": "16.0.0-prerelease.4"
+    "@semcore/flex-box": "16.0.0-prerelease.7",
+    "@semcore/neighbor-location": "16.0.0-prerelease.7"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.4"
+    "@semcore/base-components": "^16.0.0-prerelease.7"
   },
   "repository": {
     "type": "git",