@semcore/tab-panel 2.5.0 → 2.6.3

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.6.3] - 2021-12-23
+
+### Changed
+
+- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
+
+## [2.6.2] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [2.6.1] - 2021-07-05
+
+### Fixed
+
+- Add default type for generic value
+
+## [2.6.0] - 2021-06-08
+
+### Changed
+
+- Rewrite code from TS to JS 🧑‍💻
+
 ## [2.5.0] - 2021-04-28
 
 ### Added

package/lib/cjs/TabPanel.js

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = _interopRequireWildcard(require("@semcore/core"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _flexBox = require("@semcore/flex-box");
 
@@ -33,7 +33,7 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
 
 var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
 
-var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
+var _keyboardFocusEnhance = _interopRequireWildcard(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -48,18 +48,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1s036_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1s036_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.2;color:#666;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_1s036_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1s036_gg_:active,.___STabPanelItem_1s036_gg_:focus,.___STabPanelItem_1s036_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1s036_gg_:hover{color:#333}.___STabPanelItem_1s036_gg_.__disabled_1s036_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1s036_gg_.__keyboardFocused_1s036_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1s036_gg_.__active_1s036_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1s036_gg_.__active_1s036_gg_:hover{color:#0071bc}.___SText_1s036_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2em}.___SAddon_1s036_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1s036_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1s036_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_1chaf_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1chaf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.1;color:#666;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_1chaf_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1chaf_gg_:active,.___STabPanelItem_1chaf_gg_:focus,.___STabPanelItem_1chaf_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1chaf_gg_:hover{color:#333}.___STabPanelItem_1chaf_gg_.__disabled_1chaf_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1chaf_gg_.__keyboardFocused_1chaf_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1chaf_gg_.__selected_1chaf_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1chaf_gg_.__selected_1chaf_gg_:hover{color:#0071bc}.___SText_1chaf_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SAddon_1chaf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1chaf_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1chaf_gg_:not(:only-child):last-child{margin-right:8px}"
 /*__inner_css_end__*/
-, "1ewopj8_gg_")
+, "1trgup5_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1s036_gg_",
-  "__STabPanelItem": "___STabPanelItem_1s036_gg_",
-  "_disabled": "__disabled_1s036_gg_",
-  "_keyboardFocused": "__keyboardFocused_1s036_gg_",
-  "_active": "__active_1s036_gg_",
-  "__SText": "___SText_1s036_gg_",
-  "__SAddon": "___SAddon_1s036_gg_"
+  "__STabPanel": "___STabPanel_1chaf_gg_",
+  "__STabPanelItem": "___STabPanelItem_1chaf_gg_",
+  "_disabled": "__disabled_1chaf_gg_",
+  "_keyboardFocused": "__keyboardFocused_1chaf_gg_",
+  "_selected": "__selected_1chaf_gg_",
+  "__SText": "___SText_1chaf_gg_",
+  "__SAddon": "___SAddon_1chaf_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -144,14 +144,12 @@ function TabPanelItem(props) {
   var STabPanelItem = _flexBox.Box;
   var Children = props.Children,
       styles = props.styles,
-      selected = props.selected,
       addonLeft = props.addonLeft,
       addonRight = props.addonRight;
   return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, (0, _core.assignProps)({
     "type": "button",
     "tag": "button",
-    "role": "tab",
-    "active": selected
+    "role": "tab"
   }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, (0, _addonTextChildren["default"])(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TabPanel.tsx"],"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, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n  Component,\n  IFunctionProps,\n  Merge,\n  PropGetterFn,\n  PropsAndRef,\n  sstyled,\n  Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance, {\n  IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n}\n\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\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<ITabPanelProps> {\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: IFunctionProps<ITabPanelItemProps>) {\n  const STabPanelItem = Root;\n  const { Children, styles, selected, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem\n      render={Box}\n      type=\"button\"\n      tag=\"button\"\n      role=\"tab\"\n      active={selected}\n    >\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<\n  TabPanelRoot,\n  {\n    Item: [\n      Merge<ITabPanelItemProps, HTMLAttributes<HTMLButtonElement>>,\n      {\n        Text: ComponentProps<typeof Box>;\n        Addon: ComponentProps<typeof Box>;\n      }\n    ];\n  },\n  ITabPanelContext,\n  <T extends TabPanelValue = TabPanelValue>(\n    props: PropsAndRef<\n      ITabPanelProps<T>,\n      ITabPanelContext,\n      ReturnType<TabPanelRoot['uncontrolledProps']>\n    >\n  ) => React.ReactElement\n>(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport default TabPanel;\n"],"file":"TabPanel.js"}
+{"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":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n  Component,\n  IFunctionProps,\n  Merge,\n  PropGetterFn,\n  PropsAndRef,\n  sstyled,\n  Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance, {\n  IKeyboardFocusProps,\n} 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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"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;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"file":"index.js"}

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

@@ -14,7 +14,7 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.2;
+  line-height: 1.1;
   color: var(--gray40);
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -63,7 +63,7 @@ STabPanelItem[keyboardFocused] {
   box-shadow: var(--keyborad-focus);
 }
 
-STabPanelItem[active] {
+STabPanelItem[selected] {
   color: var(--denim-blue);
   border-color: var(--gray80);
   border-bottom-color: white;
@@ -80,7 +80,7 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2em;
+  line-height: 1.1;
 }
 
 SAddon {

package/lib/es6/TabPanel.js

@@ -19,30 +19,30 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
+import React, { ComponentProps, HTMLAttributes } from 'react';
+import createComponent, { Component, IFunctionProps, Merge, PropGetterFn, PropsAndRef, sstyled, Root } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import keyboardFocusEnhance, { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1s036_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1s036_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.2;color:#666;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_1s036_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1s036_gg_:active,.___STabPanelItem_1s036_gg_:focus,.___STabPanelItem_1s036_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1s036_gg_:hover{color:#333}.___STabPanelItem_1s036_gg_.__disabled_1s036_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1s036_gg_.__keyboardFocused_1s036_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1s036_gg_.__active_1s036_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1s036_gg_.__active_1s036_gg_:hover{color:#0071bc}.___SText_1s036_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2em}.___SAddon_1s036_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1s036_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1s036_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_1chaf_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1chaf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;line-height:1.1;color:#666;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_1chaf_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1chaf_gg_:active,.___STabPanelItem_1chaf_gg_:focus,.___STabPanelItem_1chaf_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1chaf_gg_:hover{color:#333}.___STabPanelItem_1chaf_gg_.__disabled_1chaf_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1chaf_gg_.__keyboardFocused_1chaf_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1chaf_gg_.__selected_1chaf_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1chaf_gg_.__selected_1chaf_gg_:hover{color:#0071bc}.___SText_1chaf_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SAddon_1chaf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1chaf_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1chaf_gg_:not(:only-child):last-child{margin-right:8px}"
 /*__inner_css_end__*/
-, "1ewopj8_gg_")
+, "1trgup5_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1s036_gg_",
-  "__STabPanelItem": "___STabPanelItem_1s036_gg_",
-  "_disabled": "__disabled_1s036_gg_",
-  "_keyboardFocused": "__keyboardFocused_1s036_gg_",
-  "_active": "__active_1s036_gg_",
-  "__SText": "___SText_1s036_gg_",
-  "__SAddon": "___SAddon_1s036_gg_"
+  "__STabPanel": "___STabPanel_1chaf_gg_",
+  "__STabPanelItem": "___STabPanelItem_1chaf_gg_",
+  "_disabled": "__disabled_1chaf_gg_",
+  "_keyboardFocused": "__keyboardFocused_1chaf_gg_",
+  "_selected": "__selected_1chaf_gg_",
+  "__SText": "___SText_1chaf_gg_",
+  "__SAddon": "___SAddon_1chaf_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {
@@ -133,14 +133,12 @@ function TabPanelItem(props) {
   var STabPanelItem = Box;
   var Children = props.Children,
       styles = props.styles,
-      selected = props.selected,
       addonLeft = props.addonLeft,
       addonRight = props.addonRight;
   return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
     "type": "button",
     "tag": "button",
-    "role": "tab",
-    "active": selected
+    "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, {

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TabPanel.tsx"],"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, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n  Component,\n  IFunctionProps,\n  Merge,\n  PropGetterFn,\n  PropsAndRef,\n  sstyled,\n  Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance, {\n  IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n}\n\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\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<ITabPanelProps> {\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: IFunctionProps<ITabPanelItemProps>) {\n  const STabPanelItem = Root;\n  const { Children, styles, selected, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem\n      render={Box}\n      type=\"button\"\n      tag=\"button\"\n      role=\"tab\"\n      active={selected}\n    >\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<\n  TabPanelRoot,\n  {\n    Item: [\n      Merge<ITabPanelItemProps, HTMLAttributes<HTMLButtonElement>>,\n      {\n        Text: ComponentProps<typeof Box>;\n        Addon: ComponentProps<typeof Box>;\n      }\n    ];\n  },\n  ITabPanelContext,\n  <T extends TabPanelValue = TabPanelValue>(\n    props: PropsAndRef<\n      ITabPanelProps<T>,\n      ITabPanelContext,\n      ReturnType<TabPanelRoot['uncontrolledProps']>\n    >\n  ) => React.ReactElement\n>(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport default TabPanel;\n"],"file":"TabPanel.js"}
+{"version":3,"sources":["../../src/TabPanel.js"],"names":["React","ComponentProps","HTMLAttributes","createComponent","Component","IFunctionProps","Merge","PropGetterFn","PropsAndRef","sstyled","Root","Box","IBoxProps","addonTextChildren","a11yEnhance","keyboardFocusEnhance","IKeyboardFocusProps","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, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n  Component,\n  IFunctionProps,\n  Merge,\n  PropGetterFn,\n  PropsAndRef,\n  sstyled,\n  Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance, {\n  IKeyboardFocusProps,\n} 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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"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;AACA,cAAc,YAAd","sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"file":"index.js"}

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

@@ -14,7 +14,7 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.2;
+  line-height: 1.1;
   color: var(--gray40);
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -63,7 +63,7 @@ STabPanelItem[keyboardFocused] {
   box-shadow: var(--keyborad-focus);
 }
 
-STabPanelItem[active] {
+STabPanelItem[selected] {
   color: var(--denim-blue);
   border-color: var(--gray80);
   border-bottom-color: white;
@@ -80,7 +80,7 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2em;
+  line-height: 1.1;
 }
 
 SAddon {

package/lib/types/index.d.ts

@@ -1,2 +1,43 @@
-export { default } from './TabPanel';
-export * from './TabPanel';
+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;
+}
+
+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;
+  /** 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/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@semcore/tab-panel",
   "description": "SEMRush TabPanel Component",
-  "version": "2.5.0",
+  "version": "2.6.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
   },
   "dependencies": {

package/src/{TabPanel.tsx → TabPanel.js}

@@ -17,31 +17,6 @@ import keyboardFocusEnhance, {
 
 import style from './style/tab-panel.shadow.css';
 
-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;
-}
-
-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;
-  /** Left addon tag  */
-  addonLeft?: React.ElementType;
-  /** Right addon tag  */
-  addonRight?: React.ElementType;
-}
-
-export interface ITabPanelContext {
-  getItemProps: PropGetterFn;
-}
-
 const optionsA11yEnhance = {
   onNeighborChange: (neighborElement) => {
     if (neighborElement) {
@@ -52,7 +27,7 @@ const optionsA11yEnhance = {
   childSelector: ['role', 'tab'],
 };
 
-class TabPanelRoot extends Component<ITabPanelProps> {
+class TabPanelRoot extends Component {
   static displayName = 'TabPanel';
   static style = style;
   static defaultProps = {
@@ -90,22 +65,16 @@ class TabPanelRoot extends Component<ITabPanelProps> {
   }
 }
 
-function TabPanelItem(props: IFunctionProps<ITabPanelItemProps>) {
+function TabPanelItem(props) {
   const STabPanelItem = Root;
-  const { Children, styles, selected, addonLeft, addonRight } = props;
+  const { Children, styles, addonLeft, addonRight } = props;
 
   return sstyled(styles)(
-    <STabPanelItem
-      render={Box}
-      type="button"
-      tag="button"
-      role="tab"
-      active={selected}
-    >
+    <STabPanelItem render={Box} type="button" tag="button" role="tab">
       {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}
       {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}
       {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}
-    </STabPanelItem>
+    </STabPanelItem>,
   );
 }
 
@@ -123,26 +92,7 @@ function Addon(props) {
   return sstyled(styles)(<SAddon render={Box} tag="span" />);
 }
 
-const TabPanel = createComponent<
-  TabPanelRoot,
-  {
-    Item: [
-      Merge<ITabPanelItemProps, HTMLAttributes<HTMLButtonElement>>,
-      {
-        Text: ComponentProps<typeof Box>;
-        Addon: ComponentProps<typeof Box>;
-      }
-    ];
-  },
-  ITabPanelContext,
-  <T extends TabPanelValue = TabPanelValue>(
-    props: PropsAndRef<
-      ITabPanelProps<T>,
-      ITabPanelContext,
-      ReturnType<TabPanelRoot['uncontrolledProps']>
-    >
-  ) => React.ReactElement
->(TabPanelRoot, {
+const TabPanel = createComponent(TabPanelRoot, {
   Item: [TabPanelItem, { Text, Addon }],
 });
 

package/src/index.d.ts

@@ -0,0 +1,43 @@
+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;
+}
+
+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;
+  /** 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/src/style/tab-panel.shadow.css

@@ -14,7 +14,7 @@ STabPanelItem {
   min-width: 0;
   height: 32px;
   font-size: var(--fs-200);
-  line-height: 1.2;
+  line-height: 1.1;
   color: var(--gray40);
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -63,7 +63,7 @@ STabPanelItem[keyboardFocused] {
   box-shadow: var(--keyborad-focus);
 }
 
-STabPanelItem[active] {
+STabPanelItem[selected] {
   color: var(--denim-blue);
   border-color: var(--gray80);
   border-bottom-color: white;
@@ -80,7 +80,7 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2em;
+  line-height: 1.1;
 }
 
 SAddon {

package/lib/types/TabPanel.d.ts

@@ -1,59 +0,0 @@
-import React, { ComponentProps, HTMLAttributes } from 'react';
-import { Component, Merge, PropGetterFn, PropsAndRef } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-export declare 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;
-}
-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;
-    /** Left addon tag  */
-    addonLeft?: React.ElementType;
-    /** Right addon tag  */
-    addonRight?: React.ElementType;
-}
-export interface ITabPanelContext {
-    getItemProps: PropGetterFn;
-}
-declare class TabPanelRoot extends Component<ITabPanelProps> {
-    static displayName: string;
-    static style: {
-        [key: string]: string;
-    };
-    static defaultProps: {
-        defaultValue: any;
-    };
-    static enhance: ((props: any) => any)[];
-    uncontrolledProps(): {
-        value: any;
-    };
-    bindHandlerClick: (value: any) => (e: any) => void;
-    getItemProps(props: any): {
-        selected: boolean;
-        onClick: (e: any) => void;
-        tabIndex: number;
-        'aria-posinset': TabPanelValue;
-        'aria-selected': boolean;
-    };
-    render(): React.ReactNode;
-}
-declare function Text(props: any): React.ReactNode;
-declare function Addon(props: any): React.ReactNode;
-declare const TabPanel: import("@semcore/core").ComponentType<ITabPanelProps<TabPanelValue>, {
-    Item: [Merge<ITabPanelItemProps, HTMLAttributes<HTMLButtonElement>>, {
-        Text: ComponentProps<typeof Box>;
-        Addon: ComponentProps<typeof Box>;
-    }];
-}, ITabPanelContext, {
-    value: any;
-}, <T extends TabPanelValue = TabPanelValue>(props: PropsAndRef<ITabPanelProps<T>, ITabPanelContext, {
-    value: any;
-}>) => React.ReactElement>;
-export default TabPanel;