@semcore/tab-panel 2.6.3 → 2.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/TabPanel.js +18 -14
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/es6/TabPanel.js +14 -14
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/types/index.d.ts +6 -0
- package/package.json +7 -2
- package/src/{TabPanel.js → TabPanel.jsx} +4 -14
- package/src/index.d.ts +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.6.6] - 2022-03-14
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- 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]).
|
|
10
|
+
|
|
11
|
+
## [2.6.5] - 2022-02-24
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added repository field to package.json file.
|
|
16
|
+
|
|
17
|
+
## [2.6.4] - 2022-02-22
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Add missed ts type `defaultValue`.
|
|
22
|
+
|
|
5
23
|
## [2.6.3] - 2021-12-23
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
25
25
|
|
|
26
26
|
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
27
27
|
|
|
28
|
-
var _react =
|
|
28
|
+
var _react = _interopRequireDefault(require("react"));
|
|
29
29
|
|
|
30
30
|
var _flexBox = require("@semcore/flex-box");
|
|
31
31
|
|
|
@@ -33,11 +33,15 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
|
|
|
33
33
|
|
|
34
34
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
35
35
|
|
|
36
|
-
var _keyboardFocusEnhance =
|
|
36
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
37
|
+
|
|
38
|
+
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); }
|
|
39
|
+
|
|
40
|
+
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; }
|
|
37
41
|
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
42
|
+
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; }
|
|
39
43
|
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
44
|
+
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; }
|
|
41
45
|
|
|
42
46
|
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); }; }
|
|
43
47
|
|
|
@@ -48,18 +52,18 @@ var style = (
|
|
|
48
52
|
/*__reshadow_css_start__*/
|
|
49
53
|
_core.sstyled.insert(
|
|
50
54
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
55
|
+
".___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}"
|
|
52
56
|
/*__inner_css_end__*/
|
|
53
57
|
, "1trgup5_gg_")
|
|
54
58
|
/*__reshadow_css_end__*/
|
|
55
59
|
, {
|
|
56
|
-
"__STabPanel": "
|
|
57
|
-
"__STabPanelItem": "
|
|
58
|
-
"_disabled": "
|
|
59
|
-
"_keyboardFocused": "
|
|
60
|
-
"_selected": "
|
|
61
|
-
"__SText": "
|
|
62
|
-
"__SAddon": "
|
|
60
|
+
"__STabPanel": "___STabPanel_1dv3b_gg_",
|
|
61
|
+
"__STabPanelItem": "___STabPanelItem_1dv3b_gg_",
|
|
62
|
+
"_disabled": "__disabled_1dv3b_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_1dv3b_gg_",
|
|
64
|
+
"_selected": "__selected_1dv3b_gg_",
|
|
65
|
+
"__SText": "___SText_1dv3b_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_1dv3b_gg_"
|
|
63
67
|
});
|
|
64
68
|
var optionsA11yEnhance = {
|
|
65
69
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabPanel.
|
|
1
|
+
{"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.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -26,4 +26,8 @@ Object.keys(_TabPanel).forEach(function (key) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
|
+
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
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; }
|
|
29
33
|
//# sourceMappingURL=index.js.map
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -11,38 +11,38 @@ import { assignProps as _assignProps3 } from "@semcore/core";
|
|
|
11
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
13
|
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
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; }
|
|
15
15
|
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
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; }
|
|
17
17
|
|
|
18
18
|
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); }; }
|
|
19
19
|
|
|
20
20
|
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; } }
|
|
21
21
|
|
|
22
|
-
import React
|
|
23
|
-
import createComponent, { Component,
|
|
24
|
-
import { Box
|
|
22
|
+
import React from 'react';
|
|
23
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
24
|
+
import { Box } from '@semcore/flex-box';
|
|
25
25
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
26
26
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
27
|
-
import keyboardFocusEnhance
|
|
27
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
28
28
|
|
|
29
29
|
/*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
30
30
|
var style = (
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___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}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
36
|
, "1trgup5_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__STabPanel": "
|
|
40
|
-
"__STabPanelItem": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"_keyboardFocused": "
|
|
43
|
-
"_selected": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
39
|
+
"__STabPanel": "___STabPanel_1dv3b_gg_",
|
|
40
|
+
"__STabPanelItem": "___STabPanelItem_1dv3b_gg_",
|
|
41
|
+
"_disabled": "__disabled_1dv3b_gg_",
|
|
42
|
+
"_keyboardFocused": "__keyboardFocused_1dv3b_gg_",
|
|
43
|
+
"_selected": "__selected_1dv3b_gg_",
|
|
44
|
+
"__SText": "___SText_1dv3b_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1dv3b_gg_"
|
|
46
46
|
});
|
|
47
47
|
var optionsA11yEnhance = {
|
|
48
48
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabPanel.
|
|
1
|
+
{"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":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;;;AAIA,IAAMC,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;;;;;;;;;;;;;;;;uEAce,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,GAG2BrB,GAH1C;AACA,UAAQsB,MAAR,GAAmB,KAAKP,OAAxB,CAAQO,MAAR;AAEA,qBAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,SAAD;AAAA,gBAA6B;AAA7B,iBAAvB;AACD;;;;EAnCwBzB,S;;gBAArBa,Y,iBACiB,U;;gBADjBA,Y,WAEWa,K;;gBAFXb,Y,kBAGkB;AACpBc,EAAAA,YAAY,EAAE;AADM,C;;gBAHlBd,Y,aAMa,CAACR,WAAW,CAACE,kBAAD,CAAZ,C;;AAgCnB,SAASqB,YAAT,CAAsBX,KAAtB,EAA6B;AAAA;AAAA;;AAC3B,MAAMY,aAAa,GAIM1B,GAJzB;AACA,MAAQ2B,QAAR,GAAoDb,KAApD,CAAQa,QAAR;AAAA,MAAkBL,MAAlB,GAAoDR,KAApD,CAAkBQ,MAAlB;AAAA,MAA0BM,SAA1B,GAAoDd,KAApD,CAA0Bc,SAA1B;AAAA,MAAqCC,UAArC,GAAoDf,KAApD,CAAqCe,UAArC;AAEA,iBAAO/B,OAAO,CAACwB,MAAD,CAAd,eACE,oBAAC,aAAD;AAAA,YAAiC,QAAjC;AAAA,WAA8C,QAA9C;AAAA,YAA4D;AAA5D,eACGM,SAAS,gBAAG,oBAAC,QAAD,CAAU,IAAV,CAAe,KAAf;AAAqB,IAAA,GAAG,EAAEA;AAA1B,IAAH,GAA6C,IADzD,EAEG3B,iBAAiB,CAAC0B,QAAD,EAAWG,QAAQ,CAACC,IAAT,CAAcC,IAAzB,EAA+BF,QAAQ,CAACC,IAAT,CAAcE,KAA7C,CAFpB,EAGGJ,UAAU,gBAAG,oBAAC,QAAD,CAAU,IAAV,CAAe,KAAf;AAAqB,IAAA,GAAG,EAAEA;AAA1B,IAAH,GAA8C,IAH3D,CADF;AAOD;;AAEDJ,YAAY,CAACS,OAAb,GAAuB,CAAC/B,oBAAoB,EAArB,CAAvB;;AAEA,SAAS6B,IAAT,CAAclB,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMqB,KAAK,GAE2BnC,GAFtC;AACA,MAAQsB,MAAR,GAAmBR,KAAnB,CAAQQ,MAAR;AACA,iBAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASW,KAAT,CAAenB,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMsB,MAAM,GAE2BpC,GAFvC;AACA,MAAQsB,MAAR,GAAmBR,KAAnB,CAAQQ,MAAR;AACA,iBAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,IAAMQ,QAAQ,GAAGlC,eAAe,CAACc,YAAD,EAAe;AAC7CqB,EAAAA,IAAI,EAAE,CAACN,YAAD,EAAe;AAAEO,IAAAA,IAAI,EAAJA,IAAF;AAAQC,IAAAA,KAAK,EAALA;AAAR,GAAf;AADuC,CAAf,CAAhC;AAIA,eAAeH,QAAf","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/types/index.d.ts
CHANGED
|
@@ -10,6 +10,10 @@ export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends
|
|
|
10
10
|
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
11
11
|
/** Value of the selected tab */
|
|
12
12
|
value?: T;
|
|
13
|
+
/** Default value of the selected tab
|
|
14
|
+
* @default null
|
|
15
|
+
* */
|
|
16
|
+
defaultValue?: T;
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
|
|
@@ -17,6 +21,8 @@ export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
|
|
|
17
21
|
selected?: boolean;
|
|
18
22
|
/** Disabled state */
|
|
19
23
|
disabled?: boolean;
|
|
24
|
+
/** Tab value */
|
|
25
|
+
value?: TabPanelValue;
|
|
20
26
|
/** Left addon tag */
|
|
21
27
|
addonLeft?: React.ElementType;
|
|
22
28
|
/** Right addon tag */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-panel",
|
|
3
3
|
"description": "SEMRush TabPanel Component",
|
|
4
|
-
"version": "2.6.
|
|
4
|
+
"version": "2.6.6",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
"react": "16.8 - 17"
|
|
22
22
|
},
|
|
23
23
|
"jest": {
|
|
24
|
-
"preset": "jest-preset-ui"
|
|
24
|
+
"preset": "@semcore/jest-preset-ui"
|
|
25
|
+
},
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/semrush/intergalactic.git",
|
|
29
|
+
"directory": "semcore/tab-panel"
|
|
25
30
|
}
|
|
26
31
|
}
|
|
@@ -1,19 +1,9 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import createComponent, {
|
|
3
|
-
|
|
4
|
-
IFunctionProps,
|
|
5
|
-
Merge,
|
|
6
|
-
PropGetterFn,
|
|
7
|
-
PropsAndRef,
|
|
8
|
-
sstyled,
|
|
9
|
-
Root,
|
|
10
|
-
} from '@semcore/core';
|
|
11
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
+
import { Box } from '@semcore/flex-box';
|
|
12
4
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
13
5
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
14
|
-
import keyboardFocusEnhance
|
|
15
|
-
IKeyboardFocusProps,
|
|
16
|
-
} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
17
7
|
|
|
18
8
|
import style from './style/tab-panel.shadow.css';
|
|
19
9
|
|
package/src/index.d.ts
CHANGED
|
@@ -10,6 +10,10 @@ export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends
|
|
|
10
10
|
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
11
11
|
/** Value of the selected tab */
|
|
12
12
|
value?: T;
|
|
13
|
+
/** Default value of the selected tab
|
|
14
|
+
* @default null
|
|
15
|
+
* */
|
|
16
|
+
defaultValue?: T;
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
|
|
@@ -17,6 +21,8 @@ export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
|
|
|
17
21
|
selected?: boolean;
|
|
18
22
|
/** Disabled state */
|
|
19
23
|
disabled?: boolean;
|
|
24
|
+
/** Tab value */
|
|
25
|
+
value?: TabPanelValue;
|
|
20
26
|
/** Left addon tag */
|
|
21
27
|
addonLeft?: React.ElementType;
|
|
22
28
|
/** Right addon tag */
|