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

package/lib/esm/TabPanel.mjs

@@ -1,122 +1,147 @@
-import h from "@babel/runtime/helpers/esm/objectSpread2";
-import f from "@babel/runtime/helpers/esm/classCallCheck";
-import v from "@babel/runtime/helpers/esm/createClass";
-import p from "@babel/runtime/helpers/esm/assertThisInitialized";
-import x 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 g, createComponent as y, assignProps as m, Component as T } from "@semcore/core";
-import c from "react";
-import { Box as b } from "@semcore/flex-box";
-import P from "@semcore/core/lib/utils/addonTextChildren";
-import I from "@semcore/core/lib/utils/enhances/a11yEnhance";
-var w = (
+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";
+var style = (
   /*__reshadow_css_start__*/
-  (g.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     '.___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_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_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
     "1uh8o_gg_"
   ), {
-    __SText: "___SText_1uh8o_gg_",
-    __SAddon: "___SAddon_1uh8o_gg_",
-    __STabPanel: "___STabPanel_1uh8o_gg_",
-    __STabPanelItem: "___STabPanelItem_1uh8o_gg_",
-    _disabled: "__disabled_1uh8o_gg_",
-    _selected: "__selected_1uh8o_gg_"
+    "__SText": "___SText_1uh8o_gg_",
+    "__SAddon": "___SAddon_1uh8o_gg_",
+    "__STabPanel": "___STabPanel_1uh8o_gg_",
+    "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
+    "_disabled": "__disabled_1uh8o_gg_",
+    "_selected": "__selected_1uh8o_gg_"
   })
-), k = {
-  onNeighborChange: function(a, e) {
-    a && (a.focus(), e.behavior === "auto" && a.click());
+);
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
   },
   childSelector: ["role", "tab"]
-}, s = /* @__PURE__ */ function(r) {
-  x(e, r);
-  var a = S(e);
-  function e() {
-    var t;
-    f(this, e);
-    for (var n = arguments.length, i = new Array(n), _ = 0; _ < n; _++)
-      i[_] = arguments[_];
-    return t = a.call.apply(a, [this].concat(i)), d(p(t), "handleClick", function(o) {
-      return function(l) {
-        t.handlers.value(o, l);
+};
+var TabPanelRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(TabPanelRoot2, _Component);
+  var _super = _createSuper(TabPanelRoot2);
+  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 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function(value) {
+      return function(event) {
+        _this.handlers.value(value, event);
       };
-    }), d(p(t), "handleKeyDown", function(o) {
-      return function(l) {
-        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t.handlers.value(o, l));
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(value) {
+      return function(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          _this.handlers.value(value, event);
+        }
       };
-    }), t;
+    });
+    return _this;
   }
-  return v(e, [{
+  _createClass(TabPanelRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         value: null
       };
     }
   }, {
     key: "getItemProps",
-    value: function(n, i) {
-      var _ = this.asProps.value, o = _ === n.value;
+    value: function getItemProps(props, index) {
+      var value = this.asProps.value;
+      var isSelected = value === props.value;
       return {
-        selected: o,
-        onClick: this.handleClick(n.value),
-        onKeyDown: this.handleKeyDown(n.value),
-        tabIndex: o ? 0 : -1,
-        "aria-selected": o
+        selected: isSelected,
+        onClick: this.handleClick(props.value),
+        onKeyDown: this.handleKeyDown(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        "aria-selected": isSelected
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, i, _ = b, o = this.asProps.styles;
-      return i = g(o), /* @__PURE__ */ c.createElement(_, i.cn("STabPanel", h({}, m({
-        role: "tablist"
-      }, n))));
+    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({
+        "role": "tablist"
+      }, _ref))));
     }
-  }]), e;
-}(T);
-d(s, "displayName", "TabPanel");
-d(s, "style", w);
-d(s, "defaultProps", {
+  }]);
+  return TabPanelRoot2;
+}(Component);
+_defineProperty(TabPanelRoot, "displayName", "TabPanel");
+_defineProperty(TabPanelRoot, "style", style);
+_defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: "manual"
 });
-d(s, "enhance", [I(k)]);
-function A(r) {
-  var a = arguments[0], e, t = b, n = r.Children, i = r.styles, _ = r.addonLeft, o = r.addonRight;
-  return e = g(i), /* @__PURE__ */ c.createElement(t, e.cn("STabPanelItem", h({}, m({
-    type: "button",
-    tag: "button",
-    tabIndex: 0,
-    role: "tab"
-  }, a))), _ ? /* @__PURE__ */ c.createElement(u.Item.Addon, {
-    tag: _
-  }) : null, P(n, u.Item.Text, u.Item.Addon), o ? /* @__PURE__ */ c.createElement(u.Item.Addon, {
-    tag: o
+_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, {
+    tag: addonLeft
+  }) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
+    tag: addonRight
   }) : null);
 }
-function C(r) {
-  var a = arguments[0], e, t = b, n = r.styles;
-  return e = g(n), /* @__PURE__ */ c.createElement(t, e.cn("SText", h({}, m({
-    tag: "span"
-  }, a))));
+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))));
 }
-function E(r) {
-  var a = arguments[0], e, t = b, n = r.styles;
-  return e = g(n), /* @__PURE__ */ c.createElement(t, e.cn("SAddon", h({}, m({
-    tag: "span"
-  }, a))));
+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))));
 }
-var u = y(s, {
-  Item: [A, {
-    Text: C,
-    Addon: E
+var TabPanel = createComponent(TabPanelRoot, {
+  Item: [TabPanelItem, {
+    Text,
+    Addon
   }]
-}), H = function(a) {
-  return a;
+});
+var wrapTabPanel = function wrapTabPanel2(wrapper) {
+  return wrapper;
 };
 export {
-  u as default,
-  H as wrapTabPanel
+  TabPanel as default,
+  wrapTabPanel
 };

package/lib/esm/index.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel 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,10 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.0-prerelease.4"
+    "@semcore/flex-box": "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",