@semcore/tab-panel 4.42.0-prerelease.9 → 4.42.0

package/CHANGELOG.md

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

package/lib/esm/TabPanel.mjs

@@ -0,0 +1,125 @@
+import m from "@babel/runtime/helpers/esm/objectSpread2";
+import v from "@babel/runtime/helpers/esm/classCallCheck";
+import x from "@babel/runtime/helpers/esm/createClass";
+import f from "@babel/runtime/helpers/esm/assertThisInitialized";
+import y from "@babel/runtime/helpers/esm/inherits";
+import S from "@babel/runtime/helpers/esm/createSuper";
+import d from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as T } from "@semcore/utils/lib/core/index";
+import P, { sstyled as u, assignProps as b, Component as q } from "@semcore/core";
+import l from "react";
+import { Box as p } from "@semcore/flex-box";
+import I from "@semcore/utils/lib/addonTextChildren";
+import k from "@semcore/utils/lib/enhances/a11yEnhance";
+import w from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+var A = (
+  /*__reshadow_css_start__*/
+  (T.insert(
+    /*__inner_css_start__*/
+    '.___STabPanel_1cd9q_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1cd9q_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1cd9q_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;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1cd9q_gg_ .___SText_1cd9q_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1cd9q_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1cd9q_gg_:active,.___STabPanelItem_1cd9q_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1cd9q_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1cd9q_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1cd9q_gg_.__disabled_1cd9q_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1cd9q_gg_.__disabled_1cd9q_gg_ .___SAddon_1cd9q_gg_,.___STabPanelItem_1cd9q_gg_.__disabled_1cd9q_gg_ .___SText_1cd9q_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1cd9q_gg_.__keyboardFocused_1cd9q_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1cd9q_gg_.__selected_1cd9q_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1cd9q_gg_.__selected_1cd9q_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1cd9q_gg_.__selected_1cd9q_gg_::after{border-bottom:none}.___SText_1cd9q_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1cd9q_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1cd9q_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1cd9q_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1cd9q_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
+    "1cd9q_gg_"
+  ), {
+    __STabPanelItem: "___STabPanelItem_1cd9q_gg_",
+    _keyboardFocused: "__keyboardFocused_1cd9q_gg_",
+    __SText: "___SText_1cd9q_gg_",
+    __SAddon: "___SAddon_1cd9q_gg_",
+    __STabPanel: "___STabPanel_1cd9q_gg_",
+    _disabled: "__disabled_1cd9q_gg_",
+    _selected: "__selected_1cd9q_gg_"
+  })
+), C = {
+  onNeighborChange: function(a, e) {
+    a && (a.focus(), e.behavior === "auto" && a.click());
+  },
+  childSelector: ["role", "tab"]
+}, g = /* @__PURE__ */ function(r) {
+  y(e, r);
+  var a = S(e);
+  function e() {
+    var t;
+    v(this, e);
+    for (var n = arguments.length, i = new Array(n), o = 0; o < n; o++)
+      i[o] = arguments[o];
+    return t = a.call.apply(a, [this].concat(i)), d(f(t), "handleClick", function(_) {
+      return function(c) {
+        t.handlers.value(_, c);
+      };
+    }), d(f(t), "handleKeyDown", function(_) {
+      return function(c) {
+        (c.key === "Enter" || c.key === " ") && (c.preventDefault(), t.handlers.value(_, c));
+      };
+    }), t;
+  }
+  return x(e, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: null
+      };
+    }
+  }, {
+    key: "getItemProps",
+    value: function(n, i) {
+      var o = this.asProps.value, _ = o === n.value;
+      return {
+        selected: _,
+        onClick: this.handleClick(n.value),
+        onKeyDown: this.handleKeyDown(n.value),
+        tabIndex: _ ? 0 : -1,
+        "aria-selected": _
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var n = this.asProps, i, o = p, _ = this.asProps.styles;
+      return i = u(_), /* @__PURE__ */ l.createElement(o, i.cn("STabPanel", m({}, b({
+        role: "tablist"
+      }, n))));
+    }
+  }]), e;
+}(q);
+d(g, "displayName", "TabPanel");
+d(g, "style", A);
+d(g, "defaultProps", {
+  defaultValue: null,
+  behavior: "manual"
+});
+d(g, "enhance", [k(C)]);
+function h(r) {
+  var a = arguments[0], e, t = p, n = r.Children, i = r.styles, o = r.addonLeft, _ = r.addonRight;
+  return e = u(i), /* @__PURE__ */ l.createElement(t, e.cn("STabPanelItem", m({}, b({
+    type: "button",
+    tag: "button",
+    role: "tab"
+  }, a))), o ? /* @__PURE__ */ l.createElement(s.Item.Addon, {
+    tag: o
+  }) : null, I(n, s.Item.Text, s.Item.Addon), _ ? /* @__PURE__ */ l.createElement(s.Item.Addon, {
+    tag: _
+  }) : null);
+}
+h.enhance = [w()];
+function E(r) {
+  var a = arguments[0], e, t = p, n = r.styles;
+  return e = u(n), /* @__PURE__ */ l.createElement(t, e.cn("SText", m({}, b({
+    tag: "span"
+  }, a))));
+}
+function z(r) {
+  var a = arguments[0], e, t = p, n = r.styles;
+  return e = u(n), /* @__PURE__ */ l.createElement(t, e.cn("SAddon", m({}, b({
+    tag: "span"
+  }, a))));
+}
+var s = P(g, {
+  Item: [h, {
+    Text: E,
+    Addon: z
+  }]
+}), O = function(a) {
+  return a;
+};
+export {
+  s as default,
+  O as wrapTabPanel
+};

package/lib/esm/index.mjs

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

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "4.42.0-prerelease.9",
+  "version": "4.42.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/utils": "4.47.1-prerelease.9",
-    "@semcore/flex-box": "5.41.0-prerelease.9"
+    "@semcore/utils": "4.48.0",
+    "@semcore/flex-box": "5.41.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.9",
+    "@semcore/core": "^2.17.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -28,6 +33,6 @@
     "@semcore/icon": "*"
   },
   "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\/*/],
+      },
+    },
+  }),
+);