@semcore/tab-panel 3.1.3 → 3.2.3
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 +13 -0
- package/lib/cjs/TabPanel.js +21 -14
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/style/tab-panel.shadow.css +1 -0
- package/lib/es6/TabPanel.js +22 -14
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/style/tab-panel.shadow.css +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.2.3] - 2022-11-28
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Tabs focus doesn't trigger tab select.
|
|
10
|
+
- Pressing "Enter" and "Space" keys focuses current tab.
|
|
11
|
+
|
|
12
|
+
## [3.1.4] - 2022-11-21
|
|
13
|
+
|
|
14
|
+
### Changed
|
|
15
|
+
|
|
16
|
+
- Changed `font-weight` of tab's text.
|
|
17
|
+
|
|
5
18
|
## [3.1.3] - 2022-10-28
|
|
6
19
|
|
|
7
20
|
### Changed
|
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -52,24 +52,23 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
"
|
|
55
|
+
".___STabPanel_1yp34_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1yp34_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;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_1yp34_gg_ .___SText_1yp34_gg_{font-size:14px;line-height:1.42;font-weight:500}.___STabPanelItem_1yp34_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1yp34_gg_:active,.___STabPanelItem_1yp34_gg_:focus,.___STabPanelItem_1yp34_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1yp34_gg_:hover{color:#191b23}.___STabPanelItem_1yp34_gg_.__disabled_1yp34_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1yp34_gg_.__keyboardFocused_1yp34_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1yp34_gg_.__selected_1yp34_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1yp34_gg_.__selected_1yp34_gg_:hover{color:#006dca}.___SText_1yp34_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1yp34_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1yp34_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1yp34_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_1yp34_gg_:only-child{margin-right:8px;margin-left:8px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1yp34_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__STabPanel": "
|
|
61
|
-
"__STabPanelItem": "
|
|
62
|
-
"__SText": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"_keyboardFocused": "
|
|
65
|
-
"_selected": "
|
|
66
|
-
"__SAddon": "
|
|
60
|
+
"__STabPanel": "___STabPanel_1yp34_gg_",
|
|
61
|
+
"__STabPanelItem": "___STabPanelItem_1yp34_gg_",
|
|
62
|
+
"__SText": "___SText_1yp34_gg_",
|
|
63
|
+
"_disabled": "__disabled_1yp34_gg_",
|
|
64
|
+
"_keyboardFocused": "__keyboardFocused_1yp34_gg_",
|
|
65
|
+
"_selected": "__selected_1yp34_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_1yp34_gg_"
|
|
67
67
|
});
|
|
68
68
|
var optionsA11yEnhance = {
|
|
69
69
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
70
70
|
if (neighborElement) {
|
|
71
71
|
neighborElement.focus();
|
|
72
|
-
neighborElement.click();
|
|
73
72
|
}
|
|
74
73
|
},
|
|
75
74
|
childSelector: ['role', 'tab']
|
|
@@ -90,9 +89,16 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
90
89
|
}
|
|
91
90
|
|
|
92
91
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
93
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "
|
|
94
|
-
return function (
|
|
95
|
-
_this.handlers.value(value,
|
|
92
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (value) {
|
|
93
|
+
return function (event) {
|
|
94
|
+
_this.handlers.value(value, event);
|
|
95
|
+
};
|
|
96
|
+
});
|
|
97
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (value) {
|
|
98
|
+
return function (event) {
|
|
99
|
+
if (event.code === 'Enter' || event.code === 'Space') {
|
|
100
|
+
_this.handlers.value(value, event);
|
|
101
|
+
}
|
|
96
102
|
};
|
|
97
103
|
});
|
|
98
104
|
return _this;
|
|
@@ -112,7 +118,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
112
118
|
var isSelected = value === props.value;
|
|
113
119
|
return {
|
|
114
120
|
selected: isSelected,
|
|
115
|
-
onClick: this.
|
|
121
|
+
onClick: this.handleClick(props.value),
|
|
122
|
+
onKeyDown: this.handleKeyDown(props.value),
|
|
116
123
|
tabIndex: isSelected ? 0 : -1,
|
|
117
124
|
'aria-posinset': value,
|
|
118
125
|
'aria-selected': isSelected
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","childSelector","TabPanelRoot","value","event","handlers","code","props","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","STabPanel","Box","styles","sstyled","Component","style","defaultValue","a11yEnhance","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","addonTextChildren","TabPanel","Item","Text","Addon","enhance","keyboardFocusEnhance","SText","SAddon","createComponent"],"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) => {\n if (neighborElement) {\n neighborElement.focus();\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 handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props) {\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-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"],"mappings":"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"}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -31,24 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
"
|
|
34
|
+
".___STabPanel_1yp34_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1yp34_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;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_1yp34_gg_ .___SText_1yp34_gg_{font-size:14px;line-height:1.42;font-weight:500}.___STabPanelItem_1yp34_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1yp34_gg_:active,.___STabPanelItem_1yp34_gg_:focus,.___STabPanelItem_1yp34_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1yp34_gg_:hover{color:#191b23}.___STabPanelItem_1yp34_gg_.__disabled_1yp34_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1yp34_gg_.__keyboardFocused_1yp34_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1yp34_gg_.__selected_1yp34_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1yp34_gg_.__selected_1yp34_gg_:hover{color:#006dca}.___SText_1yp34_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1yp34_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1yp34_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1yp34_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_1yp34_gg_:only-child{margin-right:8px;margin-left:8px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1yp34_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__STabPanel": "
|
|
40
|
-
"__STabPanelItem": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"_selected": "
|
|
45
|
-
"__SAddon": "
|
|
39
|
+
"__STabPanel": "___STabPanel_1yp34_gg_",
|
|
40
|
+
"__STabPanelItem": "___STabPanelItem_1yp34_gg_",
|
|
41
|
+
"__SText": "___SText_1yp34_gg_",
|
|
42
|
+
"_disabled": "__disabled_1yp34_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_1yp34_gg_",
|
|
44
|
+
"_selected": "__selected_1yp34_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1yp34_gg_"
|
|
46
46
|
});
|
|
47
47
|
var optionsA11yEnhance = {
|
|
48
48
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
49
49
|
if (neighborElement) {
|
|
50
50
|
neighborElement.focus();
|
|
51
|
-
neighborElement.click();
|
|
52
51
|
}
|
|
53
52
|
},
|
|
54
53
|
childSelector: ['role', 'tab']
|
|
@@ -70,9 +69,17 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
70
69
|
|
|
71
70
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
72
71
|
|
|
73
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
74
|
-
return function (
|
|
75
|
-
_this.handlers.value(value,
|
|
72
|
+
_defineProperty(_assertThisInitialized(_this), "handleClick", function (value) {
|
|
73
|
+
return function (event) {
|
|
74
|
+
_this.handlers.value(value, event);
|
|
75
|
+
};
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (value) {
|
|
79
|
+
return function (event) {
|
|
80
|
+
if (event.code === 'Enter' || event.code === 'Space') {
|
|
81
|
+
_this.handlers.value(value, event);
|
|
82
|
+
}
|
|
76
83
|
};
|
|
77
84
|
});
|
|
78
85
|
|
|
@@ -93,7 +100,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
93
100
|
var isSelected = value === props.value;
|
|
94
101
|
return {
|
|
95
102
|
selected: isSelected,
|
|
96
|
-
onClick: this.
|
|
103
|
+
onClick: this.handleClick(props.value),
|
|
104
|
+
onKeyDown: this.handleKeyDown(props.value),
|
|
97
105
|
tabIndex: isSelected ? 0 : -1,
|
|
98
106
|
'aria-posinset': value,
|
|
99
107
|
'aria-selected': isSelected
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","optionsA11yEnhance","onNeighborChange","neighborElement","focus","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","optionsA11yEnhance","onNeighborChange","neighborElement","focus","childSelector","TabPanelRoot","value","event","handlers","code","props","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","STabPanel","styles","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"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) => {\n if (neighborElement) {\n neighborElement.focus();\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 handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props) {\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-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"],"mappings":"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"}
|