@semcore/tab-panel 2.6.5 → 3.0.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.1] - 2022-05-19
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3]).
+
+## [3.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+
+## [2.6.6] - 2022-03-14
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/flex-box` [4.5.0 ~> 4.5.1]).
+
 ## [2.6.5] - 2022-02-24
 
 ### Added

package/lib/cjs/TabPanel.js

@@ -52,18 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1dv3b_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #cccccc}.___STabPanelItem_1dv3b_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.1;color:#666666;border:1px solid transparent;border-radius:4px 4px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1dv3b_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1dv3b_gg_:active,.___STabPanelItem_1dv3b_gg_:focus,.___STabPanelItem_1dv3b_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1dv3b_gg_:hover{color:#333333}.___STabPanelItem_1dv3b_gg_.__disabled_1dv3b_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1dv3b_gg_.__keyboardFocused_1dv3b_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___STabPanelItem_1dv3b_gg_.__selected_1dv3b_gg_{color:#0071bc;border-color:#cccccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1dv3b_gg_.__selected_1dv3b_gg_:hover{color:#0071bc}.___SText_1dv3b_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SAddon_1dv3b_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1dv3b_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1dv3b_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_1fc5y_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1fc5y_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1fc5y_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1fc5y_gg_:active,.___STabPanelItem_1fc5y_gg_:focus,.___STabPanelItem_1fc5y_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1fc5y_gg_:hover{color:#191b23}.___STabPanelItem_1fc5y_gg_.__disabled_1fc5y_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1fc5y_gg_.__keyboardFocused_1fc5y_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1fc5y_gg_.__selected_1fc5y_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1fc5y_gg_.__selected_1fc5y_gg_:hover{color:#006dca}.___SText_1fc5y_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1fc5y_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1fc5y_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1fc5y_gg_:not(:only-child):last-child{margin-right:8px}"
 /*__inner_css_end__*/
-, "1trgup5_gg_")
+, "16jopra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1dv3b_gg_",
-  "__STabPanelItem": "___STabPanelItem_1dv3b_gg_",
-  "_disabled": "__disabled_1dv3b_gg_",
-  "_keyboardFocused": "__keyboardFocused_1dv3b_gg_",
-  "_selected": "__selected_1dv3b_gg_",
-  "__SText": "___SText_1dv3b_gg_",
-  "__SAddon": "___SAddon_1dv3b_gg_"
+  "__STabPanel": "___STabPanel_1fc5y_gg_",
+  "__STabPanelItem": "___STabPanelItem_1fc5y_gg_",
+  "_disabled": "__disabled_1fc5y_gg_",
+  "_keyboardFocused": "__keyboardFocused_1fc5y_gg_",
+  "_selected": "__selected_1fc5y_gg_",
+  "__SText": "___SText_1fc5y_gg_",
+  "__SAddon": "___SAddon_1fc5y_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -121,7 +121,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref5;
 
       var STabPanel = _flexBox.Box;
@@ -142,7 +142,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
 
 function TabPanelItem(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref6;
 
   var STabPanelItem = _flexBox.Box;
@@ -164,7 +164,7 @@ function TabPanelItem(props) {
 TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
 
 function Text(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref7;
 
   var SText = _flexBox.Box;
@@ -175,7 +175,7 @@ function Text(props) {
 }
 
 function Addon(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref8;
 
   var SAddon = _flexBox.Box;

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TabPanel.js"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","Box","styles","Component","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,kBAAkB,GAAG;AACzBC,EAAAA,gBAAgB,EAAE,0BAACC,eAAD,EAAqB;AACrC,QAAIA,eAAJ,EAAqB;AACnBA,MAAAA,eAAe,CAACC,KAAhB;AACAD,MAAAA,eAAe,CAACE,KAAhB;AACD;AACF,GANwB;AAOzBC,EAAAA,aAAa,EAAE,CAAC,MAAD,EAAS,KAAT;AAPU,CAA3B;;IAUMC,Y;;;;;;;;;;;;;;;yGAce,UAACC,KAAD;AAAA,aAAW,UAACC,CAAD,EAAO;AACnC,cAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;AACD,OAFkB;AAAA,K;;;;;;WANnB,6BAAoB;AAClB,aAAO;AACLD,QAAAA,KAAK,EAAE;AADF,OAAP;AAGD;;;WAMD,sBAAaG,KAAb,EAAoB;AAClB,UAAQH,KAAR,GAAkB,KAAKI,OAAvB,CAAQJ,KAAR;AACA,UAAMK,UAAU,GAAGL,KAAK,KAAKG,KAAK,CAACH,KAAnC;AACA,aAAO;AACLM,QAAAA,QAAQ,EAAED,UADL;AAELE,QAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsBL,KAAK,CAACH,KAA5B,CAFJ;AAGLS,QAAAA,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAHvB;AAIL,yBAAiBL,KAJZ;AAKL,yBAAiBK;AALZ,OAAP;AAOD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMK,SAAS,GAG2BC,YAH1C;AACA,UAAQC,MAAR,GAAmB,KAAKR,OAAxB,CAAQQ,MAAR;AAEA,qBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,SAAD;AAAA,gBAA6B;AAA7B,iBAAvB;AACD;;;EAnCwBC,e;;iCAArBd,Y,iBACiB,U;iCADjBA,Y,WAEWe,K;iCAFXf,Y,kBAGkB;AACpBgB,EAAAA,YAAY,EAAE;AADM,C;iCAHlBhB,Y,aAMa,CAAC,6BAAYN,kBAAZ,CAAD,C;;AAgCnB,SAASuB,YAAT,CAAsBb,KAAtB,EAA6B;AAAA;AAAA;;AAC3B,MAAMc,aAAa,GAIMN,YAJzB;AACA,MAAQO,QAAR,GAAoDf,KAApD,CAAQe,QAAR;AAAA,MAAkBN,MAAlB,GAAoDT,KAApD,CAAkBS,MAAlB;AAAA,MAA0BO,SAA1B,GAAoDhB,KAApD,CAA0BgB,SAA1B;AAAA,MAAqCC,UAArC,GAAoDjB,KAApD,CAAqCiB,UAArC;AAEA,iBAAO,mBAAQR,MAAR,CAAP,eACE,gCAAC,aAAD;AAAA,YAAiC,QAAjC;AAAA,WAA8C,QAA9C;AAAA,YAA4D;AAA5D,eACGO,SAAS,gBAAG,gCAAC,QAAD,CAAU,IAAV,CAAe,KAAf;AAAqB,IAAA,GAAG,EAAEA;AAA1B,IAAH,GAA6C,IADzD,EAEG,mCAAkBD,QAAlB,EAA4BG,QAAQ,CAACC,IAAT,CAAcC,IAA1C,EAAgDF,QAAQ,CAACC,IAAT,CAAcE,KAA9D,CAFH,EAGGJ,UAAU,gBAAG,gCAAC,QAAD,CAAU,IAAV,CAAe,KAAf;AAAqB,IAAA,GAAG,EAAEA;AAA1B,IAAH,GAA8C,IAH3D,CADF;AAOD;;AAEDJ,YAAY,CAACS,OAAb,GAAuB,CAAC,uCAAD,CAAvB;;AAEA,SAASF,IAAT,CAAcpB,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMuB,KAAK,GAE2Bf,YAFtC;AACA,MAAQC,MAAR,GAAmBT,KAAnB,CAAQS,MAAR;AACA,iBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASY,KAAT,CAAerB,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMwB,MAAM,GAE2BhB,YAFvC;AACA,MAAQC,MAAR,GAAmBT,KAAnB,CAAQS,MAAR;AACA,iBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,IAAMS,QAAQ,GAAG,sBAAgBtB,YAAhB,EAA8B;AAC7CuB,EAAAA,IAAI,EAAE,CAACN,YAAD,EAAe;AAAEO,IAAAA,IAAI,EAAJA,IAAF;AAAQC,IAAAA,KAAK,EAALA;AAAR,GAAf;AADuC,CAA9B,CAAjB;eAIeH,Q","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\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  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\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\" 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\nTabPanelItem.enhance = [keyboardFocusEnhance()];\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 default TabPanel;\n"],"file":"TabPanel.js"}
+{"version":3,"sources":["../../src/TabPanel.jsx"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","Box","styles","Component","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\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  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\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\" 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\nTabPanelItem.enhance = [keyboardFocusEnhance()];\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 default TabPanel;\n"],"file":"TabPanel.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+export type TabPanelValue = string | number | boolean;
+
+export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
+  /** Is invoked when changing the selection */
+  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** Value of the selected tab */
+  value?: T;
+  /** Default value of the selected tab
+   * @default null
+   * */
+  defaultValue?: T;
+}
+
+export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
+  /** Makes a tab selected. This property is determined automatically depending on the value. */
+  selected?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Tab value */
+  value?: TabPanelValue;
+  /** Left addon tag  */
+  addonLeft?: React.ElementType;
+  /** Right addon tag  */
+  addonRight?: React.ElementType;
+}
+
+export interface ITabPanelContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface ITabPanelHandlers {
+  value: (value: TabPanelValue) => void;
+}
+
+declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
+  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
+    Text: typeof Box;
+    Addon: typeof Box;
+  };
+};
+
+export default TabPanel;

package/lib/cjs/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _TabPanel = _interopRequireWildcard(require("./TabPanel"));
-
-Object.keys(_TabPanel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TabPanel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _TabPanel[key];
-    }
-  });
-});
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './TabPanel';\n"],"file":"index.js"}

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

@@ -4,7 +4,7 @@ STabPanel {
   display: flex;
   width: 100%;
   max-width: 100%;
-  border-bottom: 1px solid var(--gray80);
+  border-bottom: 1px solid var(--gray-200);
 }
 
 STabPanelItem {
@@ -14,10 +14,9 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.1;
-  color: var(--gray40);
+  color: var(--gray-500);
   border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
+  border-radius: 6px 6px 0 0;
   background: transparent;
   align-items: center;
   justify-content: center;
@@ -49,7 +48,7 @@ STabPanelItem {
   }
 
   &:hover {
-    color: var(--gray20);
+    color: var(--gray-800);
   }
 }
 
@@ -60,17 +59,17 @@ STabPanelItem[disabled] {
 }
 
 STabPanelItem[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 STabPanelItem[selected] {
-  color: var(--denim-blue);
-  border-color: var(--gray80);
-  border-bottom-color: white;
+  color: var(--blue-500);
+  border-color: var(--gray-200);
+  border-bottom-color: var(--white);
   flex-shrink: 0;
 
   &:hover {
-    color: var(--denim-blue);
+    color: var(--blue-500);
   }
 }
 
@@ -80,7 +79,6 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.1;
 }
 
 SAddon {

package/lib/es6/TabPanel.js

@@ -31,18 +31,18 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1dv3b_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #cccccc}.___STabPanelItem_1dv3b_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.1;color:#666666;border:1px solid transparent;border-radius:4px 4px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1dv3b_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1dv3b_gg_:active,.___STabPanelItem_1dv3b_gg_:focus,.___STabPanelItem_1dv3b_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1dv3b_gg_:hover{color:#333333}.___STabPanelItem_1dv3b_gg_.__disabled_1dv3b_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1dv3b_gg_.__keyboardFocused_1dv3b_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___STabPanelItem_1dv3b_gg_.__selected_1dv3b_gg_{color:#0071bc;border-color:#cccccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1dv3b_gg_.__selected_1dv3b_gg_:hover{color:#0071bc}.___SText_1dv3b_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SAddon_1dv3b_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1dv3b_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1dv3b_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_1fc5y_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1fc5y_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1fc5y_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1fc5y_gg_:active,.___STabPanelItem_1fc5y_gg_:focus,.___STabPanelItem_1fc5y_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1fc5y_gg_:hover{color:#191b23}.___STabPanelItem_1fc5y_gg_.__disabled_1fc5y_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1fc5y_gg_.__keyboardFocused_1fc5y_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1fc5y_gg_.__selected_1fc5y_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1fc5y_gg_.__selected_1fc5y_gg_:hover{color:#006dca}.___SText_1fc5y_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1fc5y_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1fc5y_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1fc5y_gg_:not(:only-child):last-child{margin-right:8px}"
 /*__inner_css_end__*/
-, "1trgup5_gg_")
+, "16jopra_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1dv3b_gg_",
-  "__STabPanelItem": "___STabPanelItem_1dv3b_gg_",
-  "_disabled": "__disabled_1dv3b_gg_",
-  "_keyboardFocused": "__keyboardFocused_1dv3b_gg_",
-  "_selected": "__selected_1dv3b_gg_",
-  "__SText": "___SText_1dv3b_gg_",
-  "__SAddon": "___SAddon_1dv3b_gg_"
+  "__STabPanel": "___STabPanel_1fc5y_gg_",
+  "__STabPanelItem": "___STabPanelItem_1fc5y_gg_",
+  "_disabled": "__disabled_1fc5y_gg_",
+  "_keyboardFocused": "__keyboardFocused_1fc5y_gg_",
+  "_selected": "__selected_1fc5y_gg_",
+  "__SText": "___SText_1fc5y_gg_",
+  "__SAddon": "___SAddon_1fc5y_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -102,7 +102,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref5;
 
       var STabPanel = Box;
@@ -127,7 +127,7 @@ _defineProperty(TabPanelRoot, "defaultProps", {
 _defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
 
 function TabPanelItem(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref6;
 
   var STabPanelItem = Box;
@@ -149,7 +149,7 @@ function TabPanelItem(props) {
 TabPanelItem.enhance = [keyboardFocusEnhance()];
 
 function Text(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref7;
 
   var SText = Box;
@@ -160,7 +160,7 @@ function Text(props) {
 }
 
 function Addon(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref8;
 
   var SAddon = Box;

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TabPanel.js"],"names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","styles","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\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  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\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\" 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\nTabPanelItem.enhance = [keyboardFocusEnhance()];\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 default TabPanel;\n"],"file":"TabPanel.js"}
+{"version":3,"sources":["../../src/TabPanel.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","styles","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      neighborElement.click();\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  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      selected: isSelected,\n      onClick: this.bindHandlerClick(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-posinset': value,\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\" 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\nTabPanelItem.enhance = [keyboardFocusEnhance()];\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 default TabPanel;\n"],"file":"TabPanel.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+export type TabPanelValue = string | number | boolean;
+
+export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
+  /** Is invoked when changing the selection */
+  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** Value of the selected tab */
+  value?: T;
+  /** Default value of the selected tab
+   * @default null
+   * */
+  defaultValue?: T;
+}
+
+export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
+  /** Makes a tab selected. This property is determined automatically depending on the value. */
+  selected?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Tab value */
+  value?: TabPanelValue;
+  /** Left addon tag  */
+  addonLeft?: React.ElementType;
+  /** Right addon tag  */
+  addonRight?: React.ElementType;
+}
+
+export interface ITabPanelContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface ITabPanelHandlers {
+  value: (value: TabPanelValue) => void;
+}
+
+declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
+  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
+    Text: typeof Box;
+    Addon: typeof Box;
+  };
+};
+
+export default TabPanel;

package/lib/es6/index.js

@@ -1,3 +1,2 @@
 export { default } from './TabPanel';
-export * from './TabPanel';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AACA,cAAc,YAAd","sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB","sourcesContent":["export { default } from './TabPanel';\n"],"file":"index.js"}

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

@@ -4,7 +4,7 @@ STabPanel {
   display: flex;
   width: 100%;
   max-width: 100%;
-  border-bottom: 1px solid var(--gray80);
+  border-bottom: 1px solid var(--gray-200);
 }
 
 STabPanelItem {
@@ -14,10 +14,9 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.1;
-  color: var(--gray40);
+  color: var(--gray-500);
   border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
+  border-radius: 6px 6px 0 0;
   background: transparent;
   align-items: center;
   justify-content: center;
@@ -49,7 +48,7 @@ STabPanelItem {
   }
 
   &:hover {
-    color: var(--gray20);
+    color: var(--gray-800);
   }
 }
 
@@ -60,17 +59,17 @@ STabPanelItem[disabled] {
 }
 
 STabPanelItem[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 STabPanelItem[selected] {
-  color: var(--denim-blue);
-  border-color: var(--gray80);
-  border-bottom-color: white;
+  color: var(--blue-500);
+  border-color: var(--gray-200);
+  border-bottom-color: var(--white);
   flex-shrink: 0;
 
   &:hover {
-    color: var(--denim-blue);
+    color: var(--blue-500);
   }
 }
 
@@ -80,7 +79,6 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.1;
 }
 
 SAddon {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "SEMRush TabPanel Component",
-  "version": "2.6.5",
+  "version": "3.0.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -27,5 +27,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/tab-panel"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/index.js

@@ -1,2 +1 @@
 export { default } from './TabPanel';
-export * from './TabPanel';

package/src/style/tab-panel.shadow.css

@@ -4,7 +4,7 @@ STabPanel {
   display: flex;
   width: 100%;
   max-width: 100%;
-  border-bottom: 1px solid var(--gray80);
+  border-bottom: 1px solid var(--gray-200);
 }
 
 STabPanelItem {
@@ -14,10 +14,9 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.1;
-  color: var(--gray40);
+  color: var(--gray-500);
   border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
+  border-radius: 6px 6px 0 0;
   background: transparent;
   align-items: center;
   justify-content: center;
@@ -49,7 +48,7 @@ STabPanelItem {
   }
 
   &:hover {
-    color: var(--gray20);
+    color: var(--gray-800);
   }
 }
 
@@ -60,17 +59,17 @@ STabPanelItem[disabled] {
 }
 
 STabPanelItem[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 STabPanelItem[selected] {
-  color: var(--denim-blue);
-  border-color: var(--gray80);
-  border-bottom-color: white;
+  color: var(--blue-500);
+  border-color: var(--gray-200);
+  border-bottom-color: var(--white);
   flex-shrink: 0;
 
   &:hover {
-    color: var(--denim-blue);
+    color: var(--blue-500);
   }
 }
 
@@ -80,7 +79,6 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.1;
 }
 
 SAddon {