@semcore/tab-panel 4.43.0-prerelease.4 → 4.43.0-prerelease.5
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/lib/cjs/TabPanel.js +71 -56
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/TabPanel.type.js +2 -0
- package/lib/cjs/TabPanel.type.js.map +1 -0
- package/lib/cjs/index.js +14 -5
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/tab-panel.shadow.css +2 -19
- package/lib/es6/TabPanel.js +65 -46
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/TabPanel.type.js +2 -0
- package/lib/es6/TabPanel.type.js.map +1 -0
- package/lib/es6/index.js +2 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/tab-panel.shadow.css +2 -19
- package/lib/esm/TabPanel.mjs +65 -53
- package/lib/esm/TabPanel.type.mjs +1 -0
- package/lib/esm/index.mjs +1 -0
- package/lib/esm/style/tab-panel.shadow.css +2 -19
- package/lib/types/TabPanel.d.ts +6 -0
- package/lib/types/TabPanel.type.d.ts +71 -0
- package/lib/types/index.d.ts +2 -92
- package/package.json +4 -4
- package/lib/cjs/index.d.js +0 -2
- package/lib/cjs/index.d.js.map +0 -1
- package/lib/es6/index.d.js +0 -2
- package/lib/es6/index.d.js.map +0 -1
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -9,56 +8,41 @@ exports.wrapTabPanel = exports["default"] = void 0;
|
|
|
9
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
-
var
|
|
11
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
14
|
+
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
16
|
+
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
17
|
+
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
18
|
+
var _typography = require("@semcore/typography");
|
|
18
19
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _flexBox = require("@semcore/flex-box");
|
|
20
|
-
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
21
|
-
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
22
|
-
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
23
20
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
24
|
-
var style = (
|
|
21
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_13pnv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_13pnv_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_13pnv_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_13pnv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_13pnv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_13pnv_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SAddon_13pnv_gg_,.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SText_13pnv_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_::after{border-bottom:none}.___SText_13pnv_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_13pnv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"13pnv_gg_"),
|
|
25
22
|
/*__reshadow_css_end__*/
|
|
26
23
|
{
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"_selected": "__selected_1907k_gg_"
|
|
24
|
+
"__SText": "___SText_13pnv_gg_",
|
|
25
|
+
"__SAddon": "___SAddon_13pnv_gg_",
|
|
26
|
+
"__STabPanel": "___STabPanel_13pnv_gg_",
|
|
27
|
+
"__STabPanelItem": "___STabPanelItem_13pnv_gg_",
|
|
28
|
+
"_disabled": "__disabled_13pnv_gg_",
|
|
29
|
+
"_selected": "__selected_13pnv_gg_"
|
|
34
30
|
});
|
|
35
|
-
var optionsA11yEnhance = {
|
|
36
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
37
|
-
if (neighborElement) {
|
|
38
|
-
neighborElement.focus();
|
|
39
|
-
if (props.behavior === 'auto') {
|
|
40
|
-
neighborElement.click();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
childSelector: ['role', 'tab']
|
|
45
|
-
};
|
|
46
31
|
var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
47
|
-
(0, _inherits2["default"])(TabPanelRoot, _Component);
|
|
48
|
-
var _super = (0, _createSuper2["default"])(TabPanelRoot);
|
|
49
32
|
function TabPanelRoot() {
|
|
50
33
|
var _this;
|
|
51
34
|
(0, _classCallCheck2["default"])(this, TabPanelRoot);
|
|
52
35
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
53
36
|
args[_key] = arguments[_key];
|
|
54
37
|
}
|
|
55
|
-
_this =
|
|
56
|
-
(0, _defineProperty2["default"])(
|
|
38
|
+
_this = (0, _callSuper2["default"])(this, TabPanelRoot, [].concat(args));
|
|
39
|
+
(0, _defineProperty2["default"])(_this, "buttonRefsList", []);
|
|
40
|
+
(0, _defineProperty2["default"])(_this, "handleClick", function (value) {
|
|
57
41
|
return function (event) {
|
|
58
42
|
_this.handlers.value(value, event);
|
|
59
43
|
};
|
|
60
44
|
});
|
|
61
|
-
(0, _defineProperty2["default"])(
|
|
45
|
+
(0, _defineProperty2["default"])(_this, "handleKeyDown", function (value) {
|
|
62
46
|
return function (event) {
|
|
63
47
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
64
48
|
event.preventDefault();
|
|
@@ -68,7 +52,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
68
52
|
});
|
|
69
53
|
return _this;
|
|
70
54
|
}
|
|
71
|
-
(0,
|
|
55
|
+
(0, _inherits2["default"])(TabPanelRoot, _Component);
|
|
56
|
+
return (0, _createClass2["default"])(TabPanelRoot, [{
|
|
72
57
|
key: "uncontrolledProps",
|
|
73
58
|
value: function uncontrolledProps() {
|
|
74
59
|
return {
|
|
@@ -81,11 +66,21 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
81
66
|
var value = this.asProps.value;
|
|
82
67
|
var isSelected = value === props.value;
|
|
83
68
|
return {
|
|
84
|
-
selected: isSelected,
|
|
85
|
-
onClick: this.handleClick(props.value),
|
|
86
|
-
onKeyDown: this.handleKeyDown(props.value),
|
|
87
|
-
tabIndex: isSelected ? 0 : -1,
|
|
88
|
-
'aria-selected': isSelected
|
|
69
|
+
'selected': isSelected,
|
|
70
|
+
'onClick': this.handleClick(props.value),
|
|
71
|
+
'onKeyDown': this.handleKeyDown(props.value),
|
|
72
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
73
|
+
'aria-selected': isSelected,
|
|
74
|
+
'buttonRefsList': this.buttonRefsList,
|
|
75
|
+
index: index
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
}, {
|
|
79
|
+
key: "getItemTextProps",
|
|
80
|
+
value: function getItemTextProps(_, index) {
|
|
81
|
+
return {
|
|
82
|
+
buttonRefsList: this.buttonRefsList,
|
|
83
|
+
index: index
|
|
89
84
|
};
|
|
90
85
|
}
|
|
91
86
|
}, {
|
|
@@ -93,14 +88,13 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
93
88
|
value: function render() {
|
|
94
89
|
var _ref = this.asProps,
|
|
95
90
|
_ref5;
|
|
96
|
-
var STabPanel =
|
|
91
|
+
var STabPanel = _baseComponents.Box;
|
|
97
92
|
var styles = this.asProps.styles;
|
|
98
93
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanel, _ref5.cn("STabPanel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
99
94
|
"role": 'tablist'
|
|
100
95
|
}, _ref))));
|
|
101
96
|
}
|
|
102
97
|
}]);
|
|
103
|
-
return TabPanelRoot;
|
|
104
98
|
}(_core.Component);
|
|
105
99
|
(0, _defineProperty2["default"])(TabPanelRoot, "displayName", 'TabPanel');
|
|
106
100
|
(0, _defineProperty2["default"])(TabPanelRoot, "style", style);
|
|
@@ -108,54 +102,75 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
108
102
|
defaultValue: null,
|
|
109
103
|
behavior: 'manual'
|
|
110
104
|
});
|
|
111
|
-
(0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])(
|
|
105
|
+
(0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])({
|
|
106
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
107
|
+
if (neighborElement) {
|
|
108
|
+
neighborElement.focus();
|
|
109
|
+
if (props.behavior === 'auto') {
|
|
110
|
+
neighborElement.click();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
childSelector: ['role', 'tab']
|
|
115
|
+
})]);
|
|
116
|
+
;
|
|
112
117
|
function TabPanelItem(props) {
|
|
113
118
|
var _ref2 = arguments[0],
|
|
114
119
|
_ref6;
|
|
115
|
-
var STabPanelItem =
|
|
120
|
+
var STabPanelItem = _baseComponents.Box;
|
|
116
121
|
var Children = props.Children,
|
|
117
122
|
styles = props.styles,
|
|
118
123
|
addonLeft = props.addonLeft,
|
|
119
|
-
addonRight = props.addonRight
|
|
124
|
+
addonRight = props.addonRight,
|
|
125
|
+
buttonRefsList = props.buttonRefsList,
|
|
126
|
+
index = props.index;
|
|
127
|
+
var buttonRef = _react["default"].useRef();
|
|
128
|
+
buttonRefsList[index] = buttonRef;
|
|
120
129
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
121
130
|
"type": 'button',
|
|
122
131
|
"tag": 'button',
|
|
123
|
-
"
|
|
132
|
+
"tabIndex": 0,
|
|
133
|
+
"role": 'tab',
|
|
134
|
+
"ref": buttonRef
|
|
124
135
|
}, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
|
|
125
136
|
tag: addonLeft
|
|
126
137
|
}) : null, (0, _addonTextChildren["default"])(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
|
|
127
138
|
tag: addonRight
|
|
128
139
|
}) : null);
|
|
129
140
|
}
|
|
130
|
-
TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
|
|
131
141
|
function Text(props) {
|
|
132
142
|
var _ref3 = arguments[0],
|
|
133
143
|
_ref7;
|
|
134
|
-
var SText =
|
|
135
|
-
var styles = props.styles
|
|
144
|
+
var SText = _typography.Text;
|
|
145
|
+
var styles = props.styles,
|
|
146
|
+
_props$ellipsis = props.ellipsis,
|
|
147
|
+
ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
|
|
148
|
+
buttonRefsList = props.buttonRefsList,
|
|
149
|
+
index = props.index;
|
|
136
150
|
return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
137
|
-
"
|
|
151
|
+
"size": 200,
|
|
152
|
+
"ellipsis": ellipsis,
|
|
153
|
+
"medium": true,
|
|
154
|
+
"hint:triggerRef": buttonRefsList[index]
|
|
138
155
|
}, _ref3))));
|
|
139
156
|
}
|
|
140
157
|
function Addon(props) {
|
|
141
158
|
var _ref4 = arguments[0],
|
|
142
159
|
_ref8;
|
|
143
|
-
var SAddon =
|
|
160
|
+
var SAddon = _baseComponents.Box;
|
|
144
161
|
var styles = props.styles;
|
|
145
162
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
146
163
|
"tag": 'span'
|
|
147
164
|
}, _ref4))));
|
|
148
165
|
}
|
|
149
|
-
var TabPanel = (0, _core
|
|
166
|
+
var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
|
|
150
167
|
Item: [TabPanelItem, {
|
|
151
168
|
Text: Text,
|
|
152
169
|
Addon: Addon
|
|
153
170
|
}]
|
|
154
171
|
});
|
|
155
|
-
var wrapTabPanel = function wrapTabPanel(wrapper) {
|
|
172
|
+
var wrapTabPanel = exports.wrapTabPanel = function wrapTabPanel(wrapper) {
|
|
156
173
|
return wrapper;
|
|
157
174
|
};
|
|
158
|
-
exports
|
|
159
|
-
var _default = TabPanel;
|
|
160
|
-
exports["default"] = _default;
|
|
175
|
+
var _default = exports["default"] = TabPanel;
|
|
161
176
|
//# sourceMappingURL=TabPanel.js.map
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","_keyboardFocusEnhance","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","event","handlers","key","preventDefault","_createClass2","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"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, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\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 behavior: 'manual',\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.handleClick(props.value),\n onKeyDown: this.handleKeyDown(props.value),\n tabIndex: isSelected ? 0 : -1,\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 const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabPanelRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","event","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","_props$ellipsis","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","exports","wrapper","_default"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n typeof TabPanelRoot.enhance,\n NSTabPanel.Handlers\n> {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n\n static enhance = [\n a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: ['role', 'tab'],\n }),\n ] as const;\n\n buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props: NSTabPanel.Item.Props, index: number) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n 'selected': isSelected,\n 'onClick': this.handleClick(props.value),\n 'onKeyDown': this.handleKeyDown(props.value),\n 'tabIndex': isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\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(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Component,\n typeof TabPanelRoot,\n 'Item'\n >,\n) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n const buttonRef = React.useRef<HTMLButtonElement>();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\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\nfunction Text(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSTabPanel.Item.Text.Component,\n typeof TabPanelRoot,\n 'ItemText'\n >,\n) {\n const SText = Root;\n const { styles, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\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}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":";;;;;;;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAH,sBAAA,CAAAH,OAAA;AAA0B;AAAA,IAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAKpBC,YAAY,0BAAAC,UAAA;EAAA,SAAAD,aAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,YAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,OAAAQ,WAAA,mBAAAV,YAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAA,IAAAK,gBAAA,aAAAV,KAAA,oBA0B+D,EAAE;IAAA,IAAAU,gBAAA,aAAAV,KAAA,iBAQnE,UAACW,KAAgC;MAAA,OAAK,UAACC,KAA0C,EAAK;QAClGZ,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC,CAAC;IAAA;IAAA,IAAAF,gBAAA,aAAAV,KAAA,mBAEe,UAACW,KAAgC;MAAA,OAAK,UAACC,KAA6C,EAAK;QACvG,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;UAC9CF,KAAK,CAACG,cAAc,CAAC,CAAC;UACtBf,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;QACnC;MACF,CAAC;IAAA;IAAA,OAAAZ,KAAA;EAAA;EAAA,IAAAgB,UAAA,aAAAlB,YAAA,EAAAC,UAAA;EAAA,WAAAkB,aAAA,aAAAnB,YAAA;IAAAgB,GAAA;IAAAH,KAAA,EAfD,SAAAO,iBAAiBA,CAAA,EAAG;MAClB,OAAO;QACLP,KAAK,EAAE;MACT,CAAC;IACH;EAAC;IAAAG,GAAA;IAAAH,KAAA,EAaD,SAAAQ,YAAYA,CAACC,KAA4B,EAAEC,KAAa,EAAE;MACxD,IAAQV,KAAK,GAAK,IAAI,CAACW,OAAO,CAAtBX,KAAK;MACb,IAAMY,UAAU,GAAGZ,KAAK,KAAKS,KAAK,CAACT,KAAK;MACxC,OAAO;QACL,UAAU,EAAEY,UAAU;QACtB,SAAS,EAAE,IAAI,CAACC,WAAW,CAACJ,KAAK,CAACT,KAAK,CAAC;QACxC,WAAW,EAAE,IAAI,CAACc,aAAa,CAACL,KAAK,CAACT,KAAK,CAAC;QAC5C,UAAU,EAAEY,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;QAC/B,eAAe,EAAEA,UAAU;QAC3B,gBAAgB,EAAE,IAAI,CAACG,cAAc;QACrCL,KAAK,EAALA;MACF,CAAC;IACH;EAAC;IAAAP,GAAA;IAAAH,KAAA,EAED,SAAAgB,gBAAgBA,CAACC,CAA6B,EAAEP,KAAa,EAAE;MAC7D,OAAO;QACLK,cAAc,EAAE,IAAI,CAACA,cAAc;QACnCL,KAAK,EAALA;MACF,CAAC;IACH;EAAC;IAAAP,GAAA;IAAAH,KAAA,EAED,SAAAkB,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAR,OAAA;QAAAS,KAAA;MACP,IAAMC,SAAS,GAG2BC,mBAAG;MAF7C,IAAQC,MAAM,GAAK,IAAI,CAACZ,OAAO,CAAvBY,MAAM;MAEd,OAAAH,KAAA,GAAO,IAAAnC,aAAO,EAACsC,MAAM,CAAC,eAACxC,MAAA,YAAAyC,aAAA,CAACH,SAAS,EAAAD,KAAA,CAAAK,EAAA,kBAAAC,cAAA,qBAAAlD,KAAA,CAAAmD,WAAA;QAAA,QAAmB;MAAS,GAAAR,IAAA,GAAE,CAAC;IAClE;EAAC;AAAA,EAvEwBS,eAAS;AAAA,IAAA7B,gBAAA,aAA9BZ,YAAY,iBAKK,UAAU;AAAA,IAAAY,gBAAA,aAL3BZ,YAAY,WAMDH,KAAK;AAAA,IAAAe,gBAAA,aANhBZ,YAAY,kBAOM;EACpB0C,YAAY,EAAE,IAAI;EAClBC,QAAQ,EAAE;AACZ,CAAC;AAAA,IAAA/B,gBAAA,aAVGZ,YAAY,aAYC,CACf,IAAA4C,uBAAW,EAAC;EACVC,gBAAgB,EAAE,SAAlBA,gBAAgBA,CAAGC,eAAe,EAAExB,KAAK,EAAK;IAC5C,IAAIwB,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAIzB,KAAK,CAACqB,QAAQ,KAAK,MAAM,EAAE;QAC7BG,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC,CAAC,CACH;AAgDF;AAED,SAASC,YAAYA,CACnB5B,KAIC,EACD;EAAA,IAAA6B,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,IAAMC,aAAa,GAOMnB,mBAAG;EAN5B,IAAQoB,QAAQ,GAA2DjC,KAAK,CAAxEiC,QAAQ;IAAEnB,MAAM,GAAmDd,KAAK,CAA9Dc,MAAM;IAAEoB,SAAS,GAAwClC,KAAK,CAAtDkC,SAAS;IAAEC,UAAU,GAA4BnC,KAAK,CAA3CmC,UAAU;IAAE7B,cAAc,GAAYN,KAAK,CAA/BM,cAAc;IAAEL,KAAK,GAAKD,KAAK,CAAfC,KAAK;EACtE,IAAMmC,SAAS,GAAGC,iBAAK,CAACC,MAAM,CAAoB,CAAC;EAEnDhC,cAAc,CAACL,KAAK,CAAC,GAAGmC,SAAS;EAEjC,OAAAL,KAAA,GAAO,IAAAvD,aAAO,EAACsC,MAAM,CAAC,eACpBxC,MAAA,YAAAyC,aAAA,CAACiB,aAAa,EAAAD,KAAA,CAAAf,EAAA,sBAAAC,cAAA,qBAAAlD,KAAA,CAAAmD,WAAA;IAAA,QAAmB,QAAQ;IAAA,OAAK,QAAQ;IAAA,YAAW,CAAC;IAAA,QAAO,KAAK;IAAA,OAAMkB;EAAS,GAAAP,KAAA,KAC1FK,SAAS,gBAAG5D,MAAA,YAAAyC,aAAA,CAACwB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAU,CAAE,CAAC,GAAG,IAAI,EAC1D,IAAAS,6BAAiB,EAACV,QAAQ,EAAEM,QAAQ,CAACC,IAAI,CAACI,IAAI,EAAEL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEN,UAAU,gBAAG7D,MAAA,YAAAyC,aAAA,CAACwB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEP;EAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;AAEpB;AAEA,SAASS,IAAIA,CACX5C,KAIC,EACD;EAAA,IAAA6C,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACA,IAAMC,KAAK,GAE2BC,gBAAS;EAD/C,IAAQlC,MAAM,GAA6Cd,KAAK,CAAxDc,MAAM;IAAAmC,eAAA,GAA6CjD,KAAK,CAAhDkD,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,IAAI,GAAAA,eAAA;IAAE3C,cAAc,GAAYN,KAAK,CAA/BM,cAAc;IAAEL,KAAK,GAAKD,KAAK,CAAfC,KAAK;EACtD,OAAA6C,KAAA,GAAO,IAAAtE,aAAO,EAACsC,MAAM,CAAC,eAACxC,MAAA,YAAAyC,aAAA,CAACgC,KAAK,EAAAD,KAAA,CAAA9B,EAAA,cAAAC,cAAA,qBAAAlD,KAAA,CAAAmD,WAAA;IAAA,QAA0B,GAAG;IAAA,YAAYgC,QAAQ;IAAA;IAAA,mBAA0B5C,cAAc,CAACL,KAAK;EAAC,GAAA4C,KAAA,GAAG,CAAC;AACnI;AAEA,SAASJ,KAAKA,CACZzC,KAAyF,EACzF;EAAA,IAAAmD,KAAA,GAAArB,YAAA;IAAAsB,KAAA;EACA,IAAMC,MAAM,GAE2BxC,mBAAG;EAD1C,IAAQC,MAAM,GAAKd,KAAK,CAAhBc,MAAM;EACd,OAAAsC,KAAA,GAAO,IAAA5E,aAAO,EAACsC,MAAM,CAAC,eAACxC,MAAA,YAAAyC,aAAA,CAACsC,MAAM,EAAAD,KAAA,CAAApC,EAAA,eAAAC,cAAA,qBAAAlD,KAAA,CAAAmD,WAAA;IAAA,OAAkB;EAAM,GAAAiC,KAAA,GAAE,CAAC;AAC3D;AAEA,IAAMZ,QAAQ,GAAG,IAAAe,qBAAe,EAAC5E,YAAY,EAAE;EAC7C8D,IAAI,EAAE,CAACZ,YAAY,EAAE;IAAEgB,IAAI,EAAJA,IAAI;IAAEH,KAAK,EAALA;EAAM,CAAC;AACtC,CAAC,CAAoC;AAE9B,IAAMc,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAA+BE,OAKpC;EAAA,OAAKA,OAAO;AAAA,CAA+C;AAAC,IAAAC,QAAA,GAAAF,OAAA,cAEjEjB,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n type Value = string | number | boolean;\n type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<V>>;\n /** Value of the selected tab */\n value?: V;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: V;\n /**\n * Behavior of tabs.\n * In `auto`, changes the tab immediately when press arrow.\n * In `manual`, needs to press `space` or `enter` for select a choice.\n * @default 'auto'\n */\n behavior?: 'auto' | 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n\n namespace Item {\n type Props = BoxProps & {\n /** Makes a tab selected. This property is determined automatically depending on the value. */\n selected?: boolean;\n /** Disabled state */\n disabled?: boolean;\n /** Tab value */\n value?: NSTabPanel.Value;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n namespace Text {\n type Props = NSText.Props;\n type Component = NSText.Component;\n }\n\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabPanel.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends NSTabPanel.Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapperComponent & {\n Item: Item.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
wrapTabPanel: true
|
|
9
|
+
};
|
|
8
10
|
Object.defineProperty(exports, "default", {
|
|
9
11
|
enumerable: true,
|
|
10
12
|
get: function get() {
|
|
11
13
|
return _TabPanel["default"];
|
|
12
14
|
}
|
|
13
15
|
});
|
|
16
|
+
Object.defineProperty(exports, "wrapTabPanel", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function get() {
|
|
19
|
+
return _TabPanel.wrapTabPanel;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
14
22
|
var _TabPanel = _interopRequireWildcard(require("./TabPanel"));
|
|
15
|
-
|
|
23
|
+
var _TabPanel2 = require("./TabPanel.type");
|
|
24
|
+
Object.keys(_TabPanel2).forEach(function (key) {
|
|
16
25
|
if (key === "default" || key === "__esModule") return;
|
|
17
26
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
18
|
-
if (key in exports && exports[key] ===
|
|
27
|
+
if (key in exports && exports[key] === _TabPanel2[key]) return;
|
|
19
28
|
Object.defineProperty(exports, key, {
|
|
20
29
|
enumerable: true,
|
|
21
30
|
get: function get() {
|
|
22
|
-
return
|
|
31
|
+
return _TabPanel2[key];
|
|
23
32
|
}
|
|
24
33
|
});
|
|
25
34
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","_TabPanel2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabPanel } from './TabPanel';\nexport * from './TabPanel.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,UAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,UAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,UAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -35,27 +35,18 @@ STabPanelItem {
|
|
|
35
35
|
box-shadow: none;
|
|
36
36
|
text-decoration: none;
|
|
37
37
|
-webkit-tap-highlight-color: transparent;
|
|
38
|
-
outline: 0;
|
|
39
38
|
text-align: center;
|
|
40
39
|
vertical-align: middle;
|
|
41
40
|
font-family: inherit;
|
|
42
41
|
cursor: pointer;
|
|
43
42
|
|
|
44
|
-
& SText {
|
|
45
|
-
font-size: var(--intergalactic-fs-200, 14px);
|
|
46
|
-
line-height: var(--intergalactic-lh-200, 142%);
|
|
47
|
-
font-weight: var(--intergalactic-medium, 500);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
43
|
&::-moz-focus-inner {
|
|
51
44
|
border: none;
|
|
52
45
|
padding: 0;
|
|
53
46
|
}
|
|
54
47
|
|
|
55
48
|
&:active,
|
|
56
|
-
&:hover
|
|
57
|
-
&:focus {
|
|
58
|
-
outline: 0;
|
|
49
|
+
&:hover {
|
|
59
50
|
text-decoration: none;
|
|
60
51
|
}
|
|
61
52
|
|
|
@@ -84,10 +75,6 @@ STabPanelItem[disabled] {
|
|
|
84
75
|
}
|
|
85
76
|
}
|
|
86
77
|
|
|
87
|
-
STabPanelItem[keyboardFocused] {
|
|
88
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
78
|
STabPanelItem[selected] {
|
|
92
79
|
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
|
|
93
80
|
border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
@@ -103,11 +90,7 @@ STabPanelItem[selected] {
|
|
|
103
90
|
}
|
|
104
91
|
|
|
105
92
|
SText {
|
|
106
|
-
display: inline-block;
|
|
107
93
|
margin: auto var(--intergalactic-spacing-2x, 8px);
|
|
108
|
-
white-space: nowrap;
|
|
109
|
-
overflow: hidden;
|
|
110
|
-
text-overflow: ellipsis;
|
|
111
94
|
}
|
|
112
95
|
|
|
113
96
|
SAddon {
|
|
@@ -127,4 +110,4 @@ SAddon:not(:only-child):last-child {
|
|
|
127
110
|
SAddon:only-child {
|
|
128
111
|
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
129
112
|
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
113
|
+
}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -1,60 +1,46 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
7
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
import { sstyled as _sstyled } from "@semcore/
|
|
7
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
8
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
9
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
10
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
11
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
+
import { Box } from '@semcore/base-components';
|
|
13
|
+
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
14
|
+
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
15
|
+
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
16
|
+
import { Text as UikitText } from '@semcore/typography';
|
|
13
17
|
import React from 'react';
|
|
14
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
15
|
-
import { Box } from '@semcore/flex-box';
|
|
16
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
17
|
-
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
18
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
19
18
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
20
|
-
var style = (
|
|
19
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_13pnv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_13pnv_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_13pnv_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_13pnv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_13pnv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_13pnv_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SAddon_13pnv_gg_,.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SText_13pnv_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_::after{border-bottom:none}.___SText_13pnv_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_13pnv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"13pnv_gg_"),
|
|
21
20
|
/*__reshadow_css_end__*/
|
|
22
21
|
{
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"_selected": "__selected_1907k_gg_"
|
|
22
|
+
"__SText": "___SText_13pnv_gg_",
|
|
23
|
+
"__SAddon": "___SAddon_13pnv_gg_",
|
|
24
|
+
"__STabPanel": "___STabPanel_13pnv_gg_",
|
|
25
|
+
"__STabPanelItem": "___STabPanelItem_13pnv_gg_",
|
|
26
|
+
"_disabled": "__disabled_13pnv_gg_",
|
|
27
|
+
"_selected": "__selected_13pnv_gg_"
|
|
30
28
|
});
|
|
31
|
-
var optionsA11yEnhance = {
|
|
32
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
33
|
-
if (neighborElement) {
|
|
34
|
-
neighborElement.focus();
|
|
35
|
-
if (props.behavior === 'auto') {
|
|
36
|
-
neighborElement.click();
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
childSelector: ['role', 'tab']
|
|
41
|
-
};
|
|
42
29
|
var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
43
|
-
_inherits(TabPanelRoot, _Component);
|
|
44
|
-
var _super = _createSuper(TabPanelRoot);
|
|
45
30
|
function TabPanelRoot() {
|
|
46
31
|
var _this;
|
|
47
32
|
_classCallCheck(this, TabPanelRoot);
|
|
48
33
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
34
|
args[_key] = arguments[_key];
|
|
50
35
|
}
|
|
51
|
-
_this =
|
|
52
|
-
_defineProperty(
|
|
36
|
+
_this = _callSuper(this, TabPanelRoot, [].concat(args));
|
|
37
|
+
_defineProperty(_this, "buttonRefsList", []);
|
|
38
|
+
_defineProperty(_this, "handleClick", function (value) {
|
|
53
39
|
return function (event) {
|
|
54
40
|
_this.handlers.value(value, event);
|
|
55
41
|
};
|
|
56
42
|
});
|
|
57
|
-
_defineProperty(
|
|
43
|
+
_defineProperty(_this, "handleKeyDown", function (value) {
|
|
58
44
|
return function (event) {
|
|
59
45
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
60
46
|
event.preventDefault();
|
|
@@ -64,7 +50,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
64
50
|
});
|
|
65
51
|
return _this;
|
|
66
52
|
}
|
|
67
|
-
|
|
53
|
+
_inherits(TabPanelRoot, _Component);
|
|
54
|
+
return _createClass(TabPanelRoot, [{
|
|
68
55
|
key: "uncontrolledProps",
|
|
69
56
|
value: function uncontrolledProps() {
|
|
70
57
|
return {
|
|
@@ -77,11 +64,21 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
77
64
|
var value = this.asProps.value;
|
|
78
65
|
var isSelected = value === props.value;
|
|
79
66
|
return {
|
|
80
|
-
selected: isSelected,
|
|
81
|
-
onClick: this.handleClick(props.value),
|
|
82
|
-
onKeyDown: this.handleKeyDown(props.value),
|
|
83
|
-
tabIndex: isSelected ? 0 : -1,
|
|
84
|
-
'aria-selected': isSelected
|
|
67
|
+
'selected': isSelected,
|
|
68
|
+
'onClick': this.handleClick(props.value),
|
|
69
|
+
'onKeyDown': this.handleKeyDown(props.value),
|
|
70
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
71
|
+
'aria-selected': isSelected,
|
|
72
|
+
'buttonRefsList': this.buttonRefsList,
|
|
73
|
+
index: index
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}, {
|
|
77
|
+
key: "getItemTextProps",
|
|
78
|
+
value: function getItemTextProps(_, index) {
|
|
79
|
+
return {
|
|
80
|
+
buttonRefsList: this.buttonRefsList,
|
|
81
|
+
index: index
|
|
85
82
|
};
|
|
86
83
|
}
|
|
87
84
|
}, {
|
|
@@ -96,7 +93,6 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
96
93
|
}, _ref))));
|
|
97
94
|
}
|
|
98
95
|
}]);
|
|
99
|
-
return TabPanelRoot;
|
|
100
96
|
}(Component);
|
|
101
97
|
_defineProperty(TabPanelRoot, "displayName", 'TabPanel');
|
|
102
98
|
_defineProperty(TabPanelRoot, "style", style);
|
|
@@ -104,7 +100,18 @@ _defineProperty(TabPanelRoot, "defaultProps", {
|
|
|
104
100
|
defaultValue: null,
|
|
105
101
|
behavior: 'manual'
|
|
106
102
|
});
|
|
107
|
-
_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(
|
|
103
|
+
_defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
|
|
104
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
105
|
+
if (neighborElement) {
|
|
106
|
+
neighborElement.focus();
|
|
107
|
+
if (props.behavior === 'auto') {
|
|
108
|
+
neighborElement.click();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
childSelector: ['role', 'tab']
|
|
113
|
+
})]);
|
|
114
|
+
;
|
|
108
115
|
function TabPanelItem(props) {
|
|
109
116
|
var _ref2 = arguments[0],
|
|
110
117
|
_ref6;
|
|
@@ -112,25 +119,37 @@ function TabPanelItem(props) {
|
|
|
112
119
|
var Children = props.Children,
|
|
113
120
|
styles = props.styles,
|
|
114
121
|
addonLeft = props.addonLeft,
|
|
115
|
-
addonRight = props.addonRight
|
|
122
|
+
addonRight = props.addonRight,
|
|
123
|
+
buttonRefsList = props.buttonRefsList,
|
|
124
|
+
index = props.index;
|
|
125
|
+
var buttonRef = React.useRef();
|
|
126
|
+
buttonRefsList[index] = buttonRef;
|
|
116
127
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
|
|
117
128
|
"type": 'button',
|
|
118
129
|
"tag": 'button',
|
|
119
|
-
"
|
|
130
|
+
"tabIndex": 0,
|
|
131
|
+
"role": 'tab',
|
|
132
|
+
"ref": buttonRef
|
|
120
133
|
}, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
|
|
121
134
|
tag: addonLeft
|
|
122
135
|
}) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
|
|
123
136
|
tag: addonRight
|
|
124
137
|
}) : null);
|
|
125
138
|
}
|
|
126
|
-
TabPanelItem.enhance = [keyboardFocusEnhance()];
|
|
127
139
|
function Text(props) {
|
|
128
140
|
var _ref3 = arguments[0],
|
|
129
141
|
_ref7;
|
|
130
|
-
var SText =
|
|
131
|
-
var styles = props.styles
|
|
142
|
+
var SText = UikitText;
|
|
143
|
+
var styles = props.styles,
|
|
144
|
+
_props$ellipsis = props.ellipsis,
|
|
145
|
+
ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
|
|
146
|
+
buttonRefsList = props.buttonRefsList,
|
|
147
|
+
index = props.index;
|
|
132
148
|
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps3({
|
|
133
|
-
"
|
|
149
|
+
"size": 200,
|
|
150
|
+
"ellipsis": ellipsis,
|
|
151
|
+
"medium": true,
|
|
152
|
+
"hint:triggerRef": buttonRefsList[index]
|
|
134
153
|
}, _ref3))));
|
|
135
154
|
}
|
|
136
155
|
function Addon(props) {
|