@semcore/tab-line 4.40.0-prerelease.4 → 4.40.0

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.40.0] - 2025-02-27
+## [4.40.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/neighbor-location` [4.38.1 ~> 4.39.0], `@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [4.39.1] - 2025-02-05
 

package/lib/esm/TabLine.mjs

@@ -0,0 +1,204 @@
+import m from "@babel/runtime/helpers/esm/objectSpread2";
+import y from "@babel/runtime/helpers/esm/classCallCheck";
+import I from "@babel/runtime/helpers/esm/createClass";
+import d from "@babel/runtime/helpers/esm/assertThisInitialized";
+import k from "@babel/runtime/helpers/esm/inherits";
+import C from "@babel/runtime/helpers/esm/createSuper";
+import l from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as w } from "@semcore/utils/lib/core/index";
+import P, { sstyled as h, assignProps as v, Component as R } from "@semcore/core";
+import s from "react";
+import { Box as p } from "@semcore/flex-box";
+import z from "@semcore/utils/lib/addonTextChildren";
+import A from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import E from "@semcore/utils/lib/enhances/a11yEnhance";
+import L from "@semcore/neighbor-location";
+var N = (
+  /*__reshadow_css_start__*/
+  (w.insert(
+    /*__inner_css_start__*/
+    '.___STabLine_1ofgb_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ofgb_gg_.__underlined_1ofgb_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1ofgb_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;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1ofgb_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1ofgb_gg_:active,.___STabLineItem_1ofgb_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1ofgb_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1ofgb_gg_::after,.___STabLineItem_1ofgb_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1ofgb_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ofgb_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1ofgb_gg_.__selected_1ofgb_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1ofgb_gg_ .___SAddon_1ofgb_gg_:not(:last-child),.___STabLineItem_1ofgb_gg_ .___SText_1ofgb_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1ofgb_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_1ofgb_gg_.__selected_1ofgb_gg_{flex-shrink:0}.___STabLineItem_1ofgb_gg_.__disabled_1ofgb_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_1ofgb_gg_.__keyboardFocused_1ofgb_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SText_1ofgb_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1ofgb_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ofgb_gg_._size_m_1ofgb_gg_{height:28px;min-width:18px}.___STabLineItem_1ofgb_gg_._size_m_1ofgb_gg_ .___SText_1ofgb_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1ofgb_gg_._size_l_1ofgb_gg_{height:40px;min-width:26px}.___STabLineItem_1ofgb_gg_._size_l_1ofgb_gg_ .___SText_1ofgb_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1ofgb_gg_._neighborLocation_left_1ofgb_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ofgb_gg_.__selected_1ofgb_gg_::after,.___STabLineItem_1ofgb_gg_::after,.___STabLineItem_1ofgb_gg_::before{transition:none}.___SCaret_1ofgb_gg_{display:none}}',
+    "1ofgb_gg_"
+  ), {
+    __STabLine: "___STabLine_1ofgb_gg_",
+    _underlined: "__underlined_1ofgb_gg_",
+    __SCaret: "___SCaret_1ofgb_gg_",
+    __STabLineItem: "___STabLineItem_1ofgb_gg_",
+    _selected: "__selected_1ofgb_gg_",
+    _disabled: "__disabled_1ofgb_gg_",
+    _keyboardFocused: "__keyboardFocused_1ofgb_gg_",
+    __SText: "___SText_1ofgb_gg_",
+    __SAddon: "___SAddon_1ofgb_gg_",
+    _neighborLocation_left: "_neighborLocation_left_1ofgb_gg_",
+    _size_m: "_size_m_1ofgb_gg_",
+    _size_l: "_size_l_1ofgb_gg_"
+  })
+), V = {
+  onNeighborChange: function(o, n) {
+    o && (o.focus(), n.behavior === "auto" && o.click());
+  },
+  childSelector: ["role", "tab"]
+}, b = /* @__PURE__ */ function(_) {
+  k(n, _);
+  var o = C(n);
+  function n() {
+    var e;
+    y(this, n);
+    for (var t = arguments.length, i = new Array(t), r = 0; r < t; r++)
+      i[r] = arguments[r];
+    return e = o.call.apply(o, [this].concat(i)), l(d(e), "state", {
+      animation: null
+    }), l(d(e), "prevValue", void 0), l(d(e), "itemRefs", {}), l(d(e), "containerRef", /* @__PURE__ */ s.createRef()), l(d(e), "animationStartTimeout", -1), l(d(e), "handleAnimationStart", function() {
+      var a;
+      ((a = e.state.animation) === null || a === void 0 ? void 0 : a.started) === !1 && e.setState({
+        animation: m(m({}, e.state.animation), {}, {
+          started: !0
+        })
+      });
+    }), l(d(e), "handleAnimationEnd", function() {
+      e.setState({
+        animation: null
+      });
+    }), l(d(e), "bindHandlerClick", function(a) {
+      return function(g) {
+        e.handlers.value(a, g);
+      };
+    }), e;
+  }
+  return I(n, [{
+    key: "uncontrolledProps",
+    value: function() {
+      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;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function() {
+      this.prevValue = this.asProps.value;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function() {
+      clearTimeout(this.animationStartTimeout);
+    }
+  }, {
+    key: "animate",
+    value: function() {
+      var t = this.itemRefs[this.prevValue], i = this.itemRefs[this.asProps.value], r = this.containerRef.current;
+      if (!(!t || !i || !r)) {
+        var a = r.getBoundingClientRect(), g = t.getBoundingClientRect(), c = i.getBoundingClientRect(), f = {
+          fromLeft: g.x - a.x,
+          fromWidth: g.width,
+          toLeft: c.x - a.x,
+          toWidth: c.width,
+          started: !1
+        };
+        this.setState({
+          animation: f
+        }), clearTimeout(this.animationStartTimeout), this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
+      }
+    }
+  }, {
+    key: "getItemProps",
+    value: function(t, i) {
+      var r = this, a = this.asProps, g = a.value, c = a.size, f = g === t.value;
+      return {
+        size: c,
+        selected: f,
+        onClick: this.bindHandlerClick(t.value),
+        tabIndex: f ? 0 : -1,
+        "aria-selected": f,
+        ref: function(S) {
+          r.itemRefs[t.value] = S;
+        }
+      };
+    }
+  }, {
+    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
+      } : {};
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var t = this.asProps, i, r = p, a = "div", g = this.asProps, c = g.styles, f = g.Children, T = g.controlsLength, S = this.state.animation;
+      return i = h(c), /* @__PURE__ */ s.createElement(r, i.cn("STabLine", m({}, v({
+        role: "tablist",
+        ref: this.containerRef
+      }, t))), /* @__PURE__ */ s.createElement(L, i.cn("NeighborLocation", {
+        controlsLength: T
+      }), /* @__PURE__ */ s.createElement(f, i.cn("Children", {}))), S && /* @__PURE__ */ s.createElement(a, i.cn("SCaret", m({}, this.getCaretProps()))));
+    }
+  }]), n;
+}(R);
+l(b, "displayName", "TabLine");
+l(b, "style", N);
+l(b, "defaultProps", {
+  defaultValue: null,
+  size: "m",
+  underlined: !0,
+  behavior: "auto"
+});
+l(b, "enhance", [E(V)]);
+function x(_) {
+  var o = arguments[0], n = p, e = _.Children, t = _.styles, i = _.addonLeft, r = _.addonRight, a = _.neighborLocation;
+  return /* @__PURE__ */ s.createElement(L.Detect, {
+    neighborLocation: a
+  }, function(g) {
+    var c;
+    return c = h(t), /* @__PURE__ */ s.createElement(n, c.cn("STabLineItem", m({}, v({
+      tag: "button",
+      neighborLocation: g,
+      type: "button",
+      role: "tab"
+    }, o))), i ? /* @__PURE__ */ s.createElement(u.Item.Addon, {
+      tag: i
+    }) : null, z(e, u.Item.Text, u.Item.Addon), r ? /* @__PURE__ */ s.createElement(u.Item.Addon, {
+      tag: r
+    }) : null);
+  });
+}
+x.enhance = [A()];
+function W(_) {
+  var o = arguments[0], n, e = _.styles, t = p;
+  return n = h(e), /* @__PURE__ */ s.createElement(t, n.cn("SText", m({}, v({
+    tag: "span"
+  }, o))));
+}
+function D(_) {
+  var o = arguments[0], n, e = _.styles, t = p;
+  return n = h(e), /* @__PURE__ */ s.createElement(t, n.cn("SAddon", m({}, v({
+    tag: "span"
+  }, o))));
+}
+var u = P(b, {
+  Item: [x, {
+    Text: W,
+    Addon: D
+  }]
+}), Z = function(o) {
+  return o;
+};
+export {
+  u as default,
+  Z as wrapTabLine
+};

package/lib/esm/index.mjs

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

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "4.40.0-prerelease.4",
+  "version": "4.40.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/flex-box": "5.41.0-prerelease.4",
-    "@semcore/neighbor-location": "4.39.0-prerelease.4",
-    "@semcore/utils": "4.47.1-prerelease.4"
+    "@semcore/flex-box": "5.41.0",
+    "@semcore/neighbor-location": "4.40.0",
+    "@semcore/utils": "4.48.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.4",
+    "@semcore/core": "^2.17.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -28,6 +33,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);