@semcore/tab-panel 16.0.1-prerelease.4 → 16.0.2-prerelease.1
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 +6 -0
- package/README.md +1 -31
- package/lib/cjs/TabPanel.js +26 -28
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/TabPanel.js +23 -23
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/esm/TabPanel.mjs +27 -25
- package/lib/types/index.d.ts +7 -7
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.0.2] - 2025-06-13
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [16.0.1 ~> 16.0.2], `@semcore/base-components` [16.0.1 ~> 16.0.2]).
|
|
10
|
+
|
|
5
11
|
## [16.0.1] - 2025-05-30
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/README.md
CHANGED
|
@@ -13,40 +13,10 @@
|
|
|
13
13
|
## Install
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
|
-
npm install
|
|
16
|
+
npm install @semcore/tab-panel
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
## Usage
|
|
20
19
|
|
|
21
|
-
```jsx
|
|
22
|
-
import TabPanel from 'intergalactic/tab-panel';
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
<details>
|
|
26
|
-
<summary>Alternative installation and use</summary>
|
|
27
|
-
|
|
28
|
-
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
-
|
|
30
|
-
### Install
|
|
31
|
-
|
|
32
|
-
You can only install one package from the design system
|
|
33
|
-
|
|
34
|
-
```sh
|
|
35
|
-
npm install @semcore/tab-panel @semcore/core
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
-
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
-
|
|
41
|
-
### Usage
|
|
42
|
-
|
|
43
|
-
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
import TabPanel from '@semcore/tab-panel';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
</details>
|
|
50
20
|
|
|
51
21
|
## 👤 Author
|
|
52
22
|
|
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -8,25 +8,27 @@ exports.wrapTabPanel = exports["default"] = void 0;
|
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
12
14
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
14
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
16
|
var _core = require("@semcore/core");
|
|
16
|
-
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
var _flexBox = require("@semcore/flex-box");
|
|
18
17
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
19
18
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
19
|
+
var _flexBox = require("@semcore/flex-box");
|
|
20
|
+
var _react = _interopRequireDefault(require("react"));
|
|
21
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
20
22
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
21
|
-
var style = (
|
|
23
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_y51jf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_y51jf_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_y51jf_gg_ .___SText_y51jf_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_y51jf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_y51jf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_y51jf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_y51jf_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SAddon_y51jf_gg_,.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SText_y51jf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_::after{border-bottom:none}.___SText_y51jf_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_y51jf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_y51jf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"y51jf_gg_"),
|
|
22
24
|
/*__reshadow_css_end__*/
|
|
23
25
|
{
|
|
24
|
-
"__SText": "
|
|
25
|
-
"__SAddon": "
|
|
26
|
-
"__STabPanel": "
|
|
27
|
-
"__STabPanelItem": "
|
|
28
|
-
"_disabled": "
|
|
29
|
-
"_selected": "
|
|
26
|
+
"__SText": "___SText_y51jf_gg_",
|
|
27
|
+
"__SAddon": "___SAddon_y51jf_gg_",
|
|
28
|
+
"__STabPanel": "___STabPanel_y51jf_gg_",
|
|
29
|
+
"__STabPanelItem": "___STabPanelItem_y51jf_gg_",
|
|
30
|
+
"_disabled": "__disabled_y51jf_gg_",
|
|
31
|
+
"_selected": "__selected_y51jf_gg_"
|
|
30
32
|
});
|
|
31
33
|
var optionsA11yEnhance = {
|
|
32
34
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -40,21 +42,19 @@ var optionsA11yEnhance = {
|
|
|
40
42
|
childSelector: ['role', 'tab']
|
|
41
43
|
};
|
|
42
44
|
var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
43
|
-
(0, _inherits2["default"])(TabPanelRoot, _Component);
|
|
44
|
-
var _super = (0, _createSuper2["default"])(TabPanelRoot);
|
|
45
45
|
function TabPanelRoot() {
|
|
46
46
|
var _this;
|
|
47
47
|
(0, _classCallCheck2["default"])(this, TabPanelRoot);
|
|
48
48
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
49
|
args[_key] = arguments[_key];
|
|
50
50
|
}
|
|
51
|
-
_this =
|
|
52
|
-
(0, _defineProperty2["default"])(
|
|
51
|
+
_this = _callSuper(this, TabPanelRoot, [].concat(args));
|
|
52
|
+
(0, _defineProperty2["default"])(_this, "handleClick", function (value) {
|
|
53
53
|
return function (event) {
|
|
54
54
|
_this.handlers.value(value, event);
|
|
55
55
|
};
|
|
56
56
|
});
|
|
57
|
-
(0, _defineProperty2["default"])(
|
|
57
|
+
(0, _defineProperty2["default"])(_this, "handleKeyDown", function (value) {
|
|
58
58
|
return function (event) {
|
|
59
59
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
60
60
|
event.preventDefault();
|
|
@@ -64,7 +64,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
64
64
|
});
|
|
65
65
|
return _this;
|
|
66
66
|
}
|
|
67
|
-
(0,
|
|
67
|
+
(0, _inherits2["default"])(TabPanelRoot, _Component);
|
|
68
|
+
return (0, _createClass2["default"])(TabPanelRoot, [{
|
|
68
69
|
key: "uncontrolledProps",
|
|
69
70
|
value: function uncontrolledProps() {
|
|
70
71
|
return {
|
|
@@ -73,14 +74,14 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
73
74
|
}
|
|
74
75
|
}, {
|
|
75
76
|
key: "getItemProps",
|
|
76
|
-
value: function getItemProps(props,
|
|
77
|
+
value: function getItemProps(props, _index) {
|
|
77
78
|
var value = this.asProps.value;
|
|
78
79
|
var isSelected = value === props.value;
|
|
79
80
|
return {
|
|
80
|
-
selected: isSelected,
|
|
81
|
-
onClick: this.handleClick(props.value),
|
|
82
|
-
onKeyDown: this.handleKeyDown(props.value),
|
|
83
|
-
tabIndex: isSelected ? 0 : -1,
|
|
81
|
+
'selected': isSelected,
|
|
82
|
+
'onClick': this.handleClick(props.value),
|
|
83
|
+
'onKeyDown': this.handleKeyDown(props.value),
|
|
84
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
84
85
|
'aria-selected': isSelected
|
|
85
86
|
};
|
|
86
87
|
}
|
|
@@ -96,7 +97,6 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
96
97
|
}, _ref))));
|
|
97
98
|
}
|
|
98
99
|
}]);
|
|
99
|
-
return TabPanelRoot;
|
|
100
100
|
}(_core.Component);
|
|
101
101
|
(0, _defineProperty2["default"])(TabPanelRoot, "displayName", 'TabPanel');
|
|
102
102
|
(0, _defineProperty2["default"])(TabPanelRoot, "style", style);
|
|
@@ -148,10 +148,8 @@ var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
|
|
|
148
148
|
Addon: Addon
|
|
149
149
|
}]
|
|
150
150
|
});
|
|
151
|
-
var wrapTabPanel = function wrapTabPanel(wrapper) {
|
|
151
|
+
var wrapTabPanel = exports.wrapTabPanel = function wrapTabPanel(wrapper) {
|
|
152
152
|
return wrapper;
|
|
153
153
|
};
|
|
154
|
-
exports
|
|
155
|
-
var _default = TabPanel;
|
|
156
|
-
exports["default"] = _default;
|
|
154
|
+
var _default = exports["default"] = TabPanel;
|
|
157
155
|
//# sourceMappingURL=TabPanel.js.map
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["_core","require","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_flexBox","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","value","event","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","_index","asProps","isSelected","handleClick","handleKeyDown","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","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","exports","wrapper","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { 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 { Box } from '@semcore/flex-box';\nimport React from 'react';\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\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' tabIndex={0} 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\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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","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n extends TabPanelProps<T>,\n UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value of the selected tab */\n value?: T;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: T;\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\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = 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?: TabPanelValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n};\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n Value extends TabPanelValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabPanelProps<Value>,\n TabPanelContext,\n [handlers: TabPanelHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
});
|
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.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,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,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA"}
|
|
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.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,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,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -1,30 +1,32 @@
|
|
|
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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
7
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
7
8
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
9
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
10
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
11
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
12
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
13
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
|
-
|
|
14
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
14
15
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
15
|
-
import { Box } from '@semcore/flex-box';
|
|
16
16
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
17
17
|
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
18
|
+
import { Box } from '@semcore/flex-box';
|
|
19
|
+
import React from 'react';
|
|
18
20
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
19
|
-
var style = (
|
|
21
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_y51jf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_y51jf_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_y51jf_gg_ .___SText_y51jf_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_y51jf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_y51jf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_y51jf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_y51jf_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SAddon_y51jf_gg_,.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SText_y51jf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_::after{border-bottom:none}.___SText_y51jf_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_y51jf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_y51jf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"y51jf_gg_"),
|
|
20
22
|
/*__reshadow_css_end__*/
|
|
21
23
|
{
|
|
22
|
-
"__SText": "
|
|
23
|
-
"__SAddon": "
|
|
24
|
-
"__STabPanel": "
|
|
25
|
-
"__STabPanelItem": "
|
|
26
|
-
"_disabled": "
|
|
27
|
-
"_selected": "
|
|
24
|
+
"__SText": "___SText_y51jf_gg_",
|
|
25
|
+
"__SAddon": "___SAddon_y51jf_gg_",
|
|
26
|
+
"__STabPanel": "___STabPanel_y51jf_gg_",
|
|
27
|
+
"__STabPanelItem": "___STabPanelItem_y51jf_gg_",
|
|
28
|
+
"_disabled": "__disabled_y51jf_gg_",
|
|
29
|
+
"_selected": "__selected_y51jf_gg_"
|
|
28
30
|
});
|
|
29
31
|
var optionsA11yEnhance = {
|
|
30
32
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -38,21 +40,19 @@ var optionsA11yEnhance = {
|
|
|
38
40
|
childSelector: ['role', 'tab']
|
|
39
41
|
};
|
|
40
42
|
var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
41
|
-
_inherits(TabPanelRoot, _Component);
|
|
42
|
-
var _super = _createSuper(TabPanelRoot);
|
|
43
43
|
function TabPanelRoot() {
|
|
44
44
|
var _this;
|
|
45
45
|
_classCallCheck(this, TabPanelRoot);
|
|
46
46
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
47
47
|
args[_key] = arguments[_key];
|
|
48
48
|
}
|
|
49
|
-
_this =
|
|
50
|
-
_defineProperty(
|
|
49
|
+
_this = _callSuper(this, TabPanelRoot, [].concat(args));
|
|
50
|
+
_defineProperty(_this, "handleClick", function (value) {
|
|
51
51
|
return function (event) {
|
|
52
52
|
_this.handlers.value(value, event);
|
|
53
53
|
};
|
|
54
54
|
});
|
|
55
|
-
_defineProperty(
|
|
55
|
+
_defineProperty(_this, "handleKeyDown", function (value) {
|
|
56
56
|
return function (event) {
|
|
57
57
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
58
58
|
event.preventDefault();
|
|
@@ -62,7 +62,8 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
62
62
|
});
|
|
63
63
|
return _this;
|
|
64
64
|
}
|
|
65
|
-
|
|
65
|
+
_inherits(TabPanelRoot, _Component);
|
|
66
|
+
return _createClass(TabPanelRoot, [{
|
|
66
67
|
key: "uncontrolledProps",
|
|
67
68
|
value: function uncontrolledProps() {
|
|
68
69
|
return {
|
|
@@ -71,14 +72,14 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
}
|
|
72
73
|
}, {
|
|
73
74
|
key: "getItemProps",
|
|
74
|
-
value: function getItemProps(props,
|
|
75
|
+
value: function getItemProps(props, _index) {
|
|
75
76
|
var value = this.asProps.value;
|
|
76
77
|
var isSelected = value === props.value;
|
|
77
78
|
return {
|
|
78
|
-
selected: isSelected,
|
|
79
|
-
onClick: this.handleClick(props.value),
|
|
80
|
-
onKeyDown: this.handleKeyDown(props.value),
|
|
81
|
-
tabIndex: isSelected ? 0 : -1,
|
|
79
|
+
'selected': isSelected,
|
|
80
|
+
'onClick': this.handleClick(props.value),
|
|
81
|
+
'onKeyDown': this.handleKeyDown(props.value),
|
|
82
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
82
83
|
'aria-selected': isSelected
|
|
83
84
|
};
|
|
84
85
|
}
|
|
@@ -94,7 +95,6 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
|
|
|
94
95
|
}, _ref))));
|
|
95
96
|
}
|
|
96
97
|
}]);
|
|
97
|
-
return TabPanelRoot;
|
|
98
98
|
}(Component);
|
|
99
99
|
_defineProperty(TabPanelRoot, "displayName", 'TabPanel');
|
|
100
100
|
_defineProperty(TabPanelRoot, "style", style);
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Box","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","value","event","handlers","key","preventDefault","_inherits","_createClass","uncontrolledProps","getItemProps","_index","asProps","isSelected","handleClick","handleKeyDown","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { 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 { Box } from '@semcore/flex-box';\nimport React from 'react';\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\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' tabIndex={0} 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\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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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n extends TabPanelProps<T>,\n UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value of the selected tab */\n value?: T;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: T;\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\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = 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?: TabPanelValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n};\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n Value extends TabPanelValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabPanelProps<Value>,\n TabPanelContext,\n [handlers: TabPanelHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,cAAc,YAAY"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,cAAc,YAAY","ignoreList":[]}
|
package/lib/esm/TabPanel.mjs
CHANGED
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
5
7
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
8
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
-
import {
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { Box } from "@semcore/flex-box";
|
|
9
|
+
import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
|
|
11
10
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
12
11
|
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
12
|
+
import { Box } from "@semcore/flex-box";
|
|
13
|
+
import React from "react";
|
|
14
|
+
function _callSuper(t, o, e) {
|
|
15
|
+
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
|
|
16
|
+
}
|
|
13
17
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
14
18
|
var style = (
|
|
15
19
|
/*__reshadow_css_start__*/
|
|
16
20
|
(sstyled.insert(
|
|
17
21
|
/*__inner_css_start__*/
|
|
18
|
-
'.
|
|
22
|
+
'.___STabPanel_y51jf_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_y51jf_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_y51jf_gg_ .___SText_y51jf_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_y51jf_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_y51jf_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_y51jf_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_y51jf_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_{cursor:default;pointer-events:none}.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SAddon_y51jf_gg_,.___STabPanelItem_y51jf_gg_.__disabled_y51jf_gg_ .___SText_y51jf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_y51jf_gg_.__selected_y51jf_gg_::after{border-bottom:none}.___SText_y51jf_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_y51jf_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_y51jf_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_y51jf_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
|
|
19
23
|
/*__inner_css_end__*/
|
|
20
|
-
"
|
|
24
|
+
"y51jf_gg_"
|
|
21
25
|
), /*__reshadow_css_end__*/
|
|
22
26
|
{
|
|
23
|
-
"__SText": "
|
|
24
|
-
"__SAddon": "
|
|
25
|
-
"__STabPanel": "
|
|
26
|
-
"__STabPanelItem": "
|
|
27
|
-
"_disabled": "
|
|
28
|
-
"_selected": "
|
|
27
|
+
"__SText": "___SText_y51jf_gg_",
|
|
28
|
+
"__SAddon": "___SAddon_y51jf_gg_",
|
|
29
|
+
"__STabPanel": "___STabPanel_y51jf_gg_",
|
|
30
|
+
"__STabPanelItem": "___STabPanelItem_y51jf_gg_",
|
|
31
|
+
"_disabled": "__disabled_y51jf_gg_",
|
|
32
|
+
"_selected": "__selected_y51jf_gg_"
|
|
29
33
|
})
|
|
30
34
|
);
|
|
31
35
|
var optionsA11yEnhance = {
|
|
@@ -40,21 +44,19 @@ var optionsA11yEnhance = {
|
|
|
40
44
|
childSelector: ["role", "tab"]
|
|
41
45
|
};
|
|
42
46
|
var TabPanelRoot = /* @__PURE__ */ function(_Component) {
|
|
43
|
-
_inherits(TabPanelRoot2, _Component);
|
|
44
|
-
var _super = _createSuper(TabPanelRoot2);
|
|
45
47
|
function TabPanelRoot2() {
|
|
46
48
|
var _this;
|
|
47
49
|
_classCallCheck(this, TabPanelRoot2);
|
|
48
50
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
51
|
args[_key] = arguments[_key];
|
|
50
52
|
}
|
|
51
|
-
_this =
|
|
52
|
-
_defineProperty(
|
|
53
|
+
_this = _callSuper(this, TabPanelRoot2, [].concat(args));
|
|
54
|
+
_defineProperty(_this, "handleClick", function(value) {
|
|
53
55
|
return function(event) {
|
|
54
56
|
_this.handlers.value(value, event);
|
|
55
57
|
};
|
|
56
58
|
});
|
|
57
|
-
_defineProperty(
|
|
59
|
+
_defineProperty(_this, "handleKeyDown", function(value) {
|
|
58
60
|
return function(event) {
|
|
59
61
|
if (event.key === "Enter" || event.key === " ") {
|
|
60
62
|
event.preventDefault();
|
|
@@ -64,7 +66,8 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
|
|
|
64
66
|
});
|
|
65
67
|
return _this;
|
|
66
68
|
}
|
|
67
|
-
|
|
69
|
+
_inherits(TabPanelRoot2, _Component);
|
|
70
|
+
return _createClass(TabPanelRoot2, [{
|
|
68
71
|
key: "uncontrolledProps",
|
|
69
72
|
value: function uncontrolledProps() {
|
|
70
73
|
return {
|
|
@@ -73,14 +76,14 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
|
|
|
73
76
|
}
|
|
74
77
|
}, {
|
|
75
78
|
key: "getItemProps",
|
|
76
|
-
value: function getItemProps(props,
|
|
79
|
+
value: function getItemProps(props, _index) {
|
|
77
80
|
var value = this.asProps.value;
|
|
78
81
|
var isSelected = value === props.value;
|
|
79
82
|
return {
|
|
80
|
-
selected: isSelected,
|
|
81
|
-
onClick: this.handleClick(props.value),
|
|
82
|
-
onKeyDown: this.handleKeyDown(props.value),
|
|
83
|
-
tabIndex: isSelected ? 0 : -1,
|
|
83
|
+
"selected": isSelected,
|
|
84
|
+
"onClick": this.handleClick(props.value),
|
|
85
|
+
"onKeyDown": this.handleKeyDown(props.value),
|
|
86
|
+
"tabIndex": isSelected ? 0 : -1,
|
|
84
87
|
"aria-selected": isSelected
|
|
85
88
|
};
|
|
86
89
|
}
|
|
@@ -95,7 +98,6 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
|
|
|
95
98
|
}, _ref))));
|
|
96
99
|
}
|
|
97
100
|
}]);
|
|
98
|
-
return TabPanelRoot2;
|
|
99
101
|
}(Component);
|
|
100
102
|
_defineProperty(TabPanelRoot, "displayName", "TabPanel");
|
|
101
103
|
_defineProperty(TabPanelRoot, "style", style);
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import type { Box, BoxProps } from '@semcore/flex-box';
|
|
3
|
+
import type React from 'react';
|
|
4
4
|
|
|
5
5
|
export type TabPanelValue = string | number | boolean;
|
|
6
6
|
|
|
7
7
|
/** @deprecated */
|
|
8
8
|
export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>
|
|
9
9
|
extends TabPanelProps<T>,
|
|
10
|
-
|
|
10
|
+
UnknownProperties {}
|
|
11
11
|
export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {
|
|
12
12
|
/** Is invoked when changing the selection */
|
|
13
13
|
onChange?:
|
|
@@ -66,9 +66,9 @@ type IntergalacticTabPanelComponent<PropsExtending = {}> = (<
|
|
|
66
66
|
TabPanelContext,
|
|
67
67
|
[handlers: TabPanelHandlers]
|
|
68
68
|
> &
|
|
69
|
-
|
|
69
|
+
PropsExtending,
|
|
70
70
|
) => Intergalactic.InternalTypings.ComponentRenderingResults) &
|
|
71
|
-
|
|
71
|
+
Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;
|
|
72
72
|
|
|
73
73
|
declare const TabPanel: IntergalacticTabPanelComponent & {
|
|
74
74
|
Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {
|
|
@@ -82,7 +82,7 @@ declare const wrapTabPanel: <PropsExtending extends {}>(
|
|
|
82
82
|
props: Intergalactic.InternalTypings.UntypeRefAndTag<
|
|
83
83
|
Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>
|
|
84
84
|
> &
|
|
85
|
-
|
|
85
|
+
PropsExtending,
|
|
86
86
|
) => React.ReactNode,
|
|
87
87
|
) => IntergalacticTabPanelComponent<PropsExtending>;
|
|
88
88
|
export { wrapTabPanel };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-panel",
|
|
3
3
|
"description": "Semrush TabPanel Component",
|
|
4
|
-
"version": "16.0.
|
|
4
|
+
"version": "16.0.2-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.
|
|
17
|
+
"@semcore/flex-box": "16.0.2-prerelease.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@semcore/base-components": "^16.0.
|
|
20
|
+
"@semcore/base-components": "^16.0.2-prerelease.1"
|
|
21
21
|
},
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"directory": "semcore/tab-panel"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@
|
|
29
|
-
"@semcore/
|
|
30
|
-
"@semcore/
|
|
28
|
+
"@semcore/core": "16.0.0",
|
|
29
|
+
"@semcore/icon": "16.2.1-prerelease.1",
|
|
30
|
+
"@semcore/testing-utils": "1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|