@semcore/tab-panel 2.6.2 → 2.6.5

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.6.5] - 2022-02-24
+
+### Added
+
+- Added repository field to package.json file.
+
+## [2.6.4] - 2022-02-22
+
+### Fixed
+
+- Add missed ts type `defaultValue`.
+
+## [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

package/lib/cjs/TabPanel.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = _interopRequireWildcard(require("@semcore/core"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _flexBox = require("@semcore/flex-box");
 
@@ -33,11 +33,15 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
 
 var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
 
-var _keyboardFocusEnhance = _interopRequireWildcard(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
+var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
+
+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; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -48,18 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1pj9n_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1pj9n_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_1pj9n_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1pj9n_gg_:active,.___STabPanelItem_1pj9n_gg_:focus,.___STabPanelItem_1pj9n_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1pj9n_gg_:hover{color:#333}.___STabPanelItem_1pj9n_gg_.__disabled_1pj9n_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1pj9n_gg_.__keyboardFocused_1pj9n_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1pj9n_gg_.__selected_1pj9n_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1pj9n_gg_.__selected_1pj9n_gg_:hover{color:#0071bc}.___SText_1pj9n_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2em}.___SAddon_1pj9n_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1pj9n_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1pj9n_gg_:not(:only-child):last-child{margin-right:8px}"
+".___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}"
 /*__inner_css_end__*/
-, "8r9u81_gg_")
+, "1trgup5_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1pj9n_gg_",
-  "__STabPanelItem": "___STabPanelItem_1pj9n_gg_",
-  "_disabled": "__disabled_1pj9n_gg_",
-  "_keyboardFocused": "__keyboardFocused_1pj9n_gg_",
-  "_selected": "__selected_1pj9n_gg_",
-  "__SText": "___SText_1pj9n_gg_",
-  "__SAddon": "___SAddon_1pj9n_gg_"
+  "__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_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

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":"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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"}
+{"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 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.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -26,4 +26,8 @@ Object.keys(_TabPanel).forEach(function (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; }
 //# sourceMappingURL=index.js.map

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;
@@ -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

@@ -11,38 +11,38 @@ import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 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, { ComponentProps, HTMLAttributes } from 'react';
-import createComponent, { Component, IFunctionProps, Merge, PropGetterFn, PropsAndRef, sstyled, Root } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
-import keyboardFocusEnhance, { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1pj9n_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #ccc}.___STabPanelItem_1pj9n_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_1pj9n_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1pj9n_gg_:active,.___STabPanelItem_1pj9n_gg_:focus,.___STabPanelItem_1pj9n_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1pj9n_gg_:hover{color:#333}.___STabPanelItem_1pj9n_gg_.__disabled_1pj9n_gg_{opacity:.3;cursor:default;pointer-events:none}.___STabPanelItem_1pj9n_gg_.__keyboardFocused_1pj9n_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___STabPanelItem_1pj9n_gg_.__selected_1pj9n_gg_{color:#0071bc;border-color:#ccc;border-bottom-color:#fff;flex-shrink:0}.___STabPanelItem_1pj9n_gg_.__selected_1pj9n_gg_:hover{color:#0071bc}.___SText_1pj9n_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2em}.___SAddon_1pj9n_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1pj9n_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1pj9n_gg_:not(:only-child):last-child{margin-right:8px}"
+".___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}"
 /*__inner_css_end__*/
-, "8r9u81_gg_")
+, "1trgup5_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1pj9n_gg_",
-  "__STabPanelItem": "___STabPanelItem_1pj9n_gg_",
-  "_disabled": "__disabled_1pj9n_gg_",
-  "_keyboardFocused": "__keyboardFocused_1pj9n_gg_",
-  "_selected": "__selected_1pj9n_gg_",
-  "__SText": "___SText_1pj9n_gg_",
-  "__SAddon": "___SAddon_1pj9n_gg_"
+  "__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_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"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"}
+{"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"}

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;
@@ -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

@@ -10,6 +10,10 @@ export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends
   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 {
@@ -17,6 +21,8 @@ export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
   selected?: boolean;
   /** Disabled state */
   disabled?: boolean;
+  /** Tab value */
+  value?: TabPanelValue;
   /** Left addon tag  */
   addonLeft?: React.ElementType;
   /** Right addon tag  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "SEMRush TabPanel Component",
-  "version": "2.6.2",
+  "version": "2.6.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -21,6 +21,11 @@
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/tab-panel"
   }
 }

package/src/TabPanel.js

@@ -1,19 +1,9 @@
-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 React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
-import keyboardFocusEnhance, {
-  IKeyboardFocusProps,
-} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 import style from './style/tab-panel.shadow.css';
 

package/src/index.d.ts

@@ -10,6 +10,10 @@ export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends
   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 {
@@ -17,6 +21,8 @@ export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
   selected?: boolean;
   /** Disabled state */
   disabled?: boolean;
+  /** Tab value */
+  value?: TabPanelValue;
   /** Left addon tag  */
   addonLeft?: React.ElementType;
   /** Right addon tag  */

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;
@@ -80,7 +80,7 @@ SText {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2em;
+  line-height: 1.1;
 }
 
 SAddon {