@semcore/tab-panel 4.42.4-prerelease.0 → 16.0.0-prerelease.0
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/lib/cjs/TabPanel.js +12 -16
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/tab-panel.shadow.css +2 -9
- package/lib/es6/TabPanel.js +12 -14
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/tab-panel.shadow.css +2 -9
- package/lib/esm/TabPanel.mjs +16 -19
- package/lib/esm/style/tab-panel.shadow.css +2 -9
- package/lib/types/index.d.ts +12 -14
- package/package.json +3 -6
package/CHANGELOG.md
CHANGED
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
@@ -13,24 +12,21 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
13
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
13
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
15
|
+
var _core = require("@semcore/core");
|
|
18
16
|
var _react = _interopRequireDefault(require("react"));
|
|
19
17
|
var _flexBox = require("@semcore/flex-box");
|
|
20
|
-
var _addonTextChildren = _interopRequireDefault(require("@semcore/
|
|
21
|
-
var _a11yEnhance = _interopRequireDefault(require("@semcore/
|
|
22
|
-
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
18
|
+
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
19
|
+
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
23
20
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
24
|
-
var style = ( /*__reshadow_css_start__*/
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_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_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1uh8o_gg_"),
|
|
25
22
|
/*__reshadow_css_end__*/
|
|
26
23
|
{
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"_selected": "__selected_1cybh_gg_"
|
|
24
|
+
"__SText": "___SText_1uh8o_gg_",
|
|
25
|
+
"__SAddon": "___SAddon_1uh8o_gg_",
|
|
26
|
+
"__STabPanel": "___STabPanel_1uh8o_gg_",
|
|
27
|
+
"__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
|
|
28
|
+
"_disabled": "__disabled_1uh8o_gg_",
|
|
29
|
+
"_selected": "__selected_1uh8o_gg_"
|
|
34
30
|
});
|
|
35
31
|
var optionsA11yEnhance = {
|
|
36
32
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -120,6 +116,7 @@ function TabPanelItem(props) {
|
|
|
120
116
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
121
117
|
"type": 'button',
|
|
122
118
|
"tag": 'button',
|
|
119
|
+
"tabIndex": 0,
|
|
123
120
|
"role": 'tab'
|
|
124
121
|
}, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
|
|
125
122
|
tag: addonLeft
|
|
@@ -127,7 +124,6 @@ function TabPanelItem(props) {
|
|
|
127
124
|
tag: addonRight
|
|
128
125
|
}) : null);
|
|
129
126
|
}
|
|
130
|
-
TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
|
|
131
127
|
function Text(props) {
|
|
132
128
|
var _ref3 = arguments[0],
|
|
133
129
|
_ref7;
|
|
@@ -146,7 +142,7 @@ function Addon(props) {
|
|
|
146
142
|
"tag": 'span'
|
|
147
143
|
}, _ref4))));
|
|
148
144
|
}
|
|
149
|
-
var TabPanel = (0, _core
|
|
145
|
+
var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
|
|
150
146
|
Item: [TabPanelItem, {
|
|
151
147
|
Text: Text,
|
|
152
148
|
Addon: Addon
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","style","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","_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/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\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' 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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"}
|
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 React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\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) &\n Intergalactic.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":""}
|
|
@@ -35,7 +35,6 @@ 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;
|
|
@@ -53,9 +52,7 @@ STabPanelItem {
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
&:active,
|
|
56
|
-
&:hover
|
|
57
|
-
&:focus {
|
|
58
|
-
outline: 0;
|
|
55
|
+
&:hover {
|
|
59
56
|
text-decoration: none;
|
|
60
57
|
}
|
|
61
58
|
|
|
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
|
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
|
|
87
|
-
STabPanelItem[keyboardFocused] {
|
|
88
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
84
|
STabPanelItem[selected] {
|
|
92
85
|
color: var(--intergalactic-text-link, #006dca);
|
|
93
86
|
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
@@ -127,4 +120,4 @@ SAddon:not(:only-child):last-child {
|
|
|
127
120
|
SAddon:only-child {
|
|
128
121
|
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
129
122
|
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
123
|
+
}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -5,28 +5,26 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
|
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
6
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
import { sstyled as _sstyled } from "@semcore/
|
|
8
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
10
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
13
|
import React from 'react';
|
|
14
|
-
import createComponent,
|
|
14
|
+
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
15
15
|
import { Box } from '@semcore/flex-box';
|
|
16
|
-
import addonTextChildren from '@semcore/
|
|
17
|
-
import a11yEnhance from '@semcore/
|
|
18
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
16
|
+
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
17
|
+
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
19
18
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
20
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
19
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_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_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1uh8o_gg_"),
|
|
21
20
|
/*__reshadow_css_end__*/
|
|
22
21
|
{
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"_selected": "__selected_1cybh_gg_"
|
|
22
|
+
"__SText": "___SText_1uh8o_gg_",
|
|
23
|
+
"__SAddon": "___SAddon_1uh8o_gg_",
|
|
24
|
+
"__STabPanel": "___STabPanel_1uh8o_gg_",
|
|
25
|
+
"__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
|
|
26
|
+
"_disabled": "__disabled_1uh8o_gg_",
|
|
27
|
+
"_selected": "__selected_1uh8o_gg_"
|
|
30
28
|
});
|
|
31
29
|
var optionsA11yEnhance = {
|
|
32
30
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -116,6 +114,7 @@ function TabPanelItem(props) {
|
|
|
116
114
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
|
|
117
115
|
"type": 'button',
|
|
118
116
|
"tag": 'button',
|
|
117
|
+
"tabIndex": 0,
|
|
119
118
|
"role": 'tab'
|
|
120
119
|
}, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
|
|
121
120
|
tag: addonLeft
|
|
@@ -123,7 +122,6 @@ function TabPanelItem(props) {
|
|
|
123
122
|
tag: addonRight
|
|
124
123
|
}) : null);
|
|
125
124
|
}
|
|
126
|
-
TabPanelItem.enhance = [keyboardFocusEnhance()];
|
|
127
125
|
function Text(props) {
|
|
128
126
|
var _ref3 = arguments[0],
|
|
129
127
|
_ref7;
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","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 React from 'react';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\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' 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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"}
|
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 React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\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) &\n Intergalactic.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":""}
|
|
@@ -35,7 +35,6 @@ 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;
|
|
@@ -53,9 +52,7 @@ STabPanelItem {
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
&:active,
|
|
56
|
-
&:hover
|
|
57
|
-
&:focus {
|
|
58
|
-
outline: 0;
|
|
55
|
+
&:hover {
|
|
59
56
|
text-decoration: none;
|
|
60
57
|
}
|
|
61
58
|
|
|
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
|
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
|
|
87
|
-
STabPanelItem[keyboardFocused] {
|
|
88
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
84
|
STabPanelItem[selected] {
|
|
92
85
|
color: var(--intergalactic-text-link, #006dca);
|
|
93
86
|
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
@@ -127,4 +120,4 @@ SAddon:not(:only-child):last-child {
|
|
|
127
120
|
SAddon:only-child {
|
|
128
121
|
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
129
122
|
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
123
|
+
}
|
package/lib/esm/TabPanel.mjs
CHANGED
|
@@ -5,30 +5,27 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
|
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
6
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
-
import { sstyled } from "@semcore/
|
|
9
|
-
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
8
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
10
9
|
import React from "react";
|
|
11
10
|
import { Box } from "@semcore/flex-box";
|
|
12
|
-
import addonTextChildren from "@semcore/
|
|
13
|
-
import a11yEnhance from "@semcore/
|
|
14
|
-
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
11
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
12
|
+
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
15
13
|
/*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
16
14
|
var style = (
|
|
17
15
|
/*__reshadow_css_start__*/
|
|
18
16
|
(sstyled.insert(
|
|
19
17
|
/*__inner_css_start__*/
|
|
20
|
-
'.
|
|
18
|
+
'.___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_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_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
|
|
21
19
|
/*__inner_css_end__*/
|
|
22
|
-
"
|
|
20
|
+
"1uh8o_gg_"
|
|
23
21
|
), /*__reshadow_css_end__*/
|
|
24
22
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"_selected": "__selected_1cybh_gg_"
|
|
23
|
+
"__SText": "___SText_1uh8o_gg_",
|
|
24
|
+
"__SAddon": "___SAddon_1uh8o_gg_",
|
|
25
|
+
"__STabPanel": "___STabPanel_1uh8o_gg_",
|
|
26
|
+
"__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
|
|
27
|
+
"_disabled": "__disabled_1uh8o_gg_",
|
|
28
|
+
"_selected": "__selected_1uh8o_gg_"
|
|
32
29
|
})
|
|
33
30
|
);
|
|
34
31
|
var optionsA11yEnhance = {
|
|
@@ -93,7 +90,7 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
|
|
|
93
90
|
var _ref = this.asProps, _ref5;
|
|
94
91
|
var STabPanel = Box;
|
|
95
92
|
var styles = this.asProps.styles;
|
|
96
|
-
return _ref5 = sstyled
|
|
93
|
+
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, assignProps({
|
|
97
94
|
"role": "tablist"
|
|
98
95
|
}, _ref))));
|
|
99
96
|
}
|
|
@@ -111,9 +108,10 @@ function TabPanelItem(props) {
|
|
|
111
108
|
var _ref2 = arguments[0], _ref6;
|
|
112
109
|
var STabPanelItem = Box;
|
|
113
110
|
var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight;
|
|
114
|
-
return _ref6 = sstyled
|
|
111
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, assignProps({
|
|
115
112
|
"type": "button",
|
|
116
113
|
"tag": "button",
|
|
114
|
+
"tabIndex": 0,
|
|
117
115
|
"role": "tab"
|
|
118
116
|
}, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
|
|
119
117
|
tag: addonLeft
|
|
@@ -121,12 +119,11 @@ function TabPanelItem(props) {
|
|
|
121
119
|
tag: addonRight
|
|
122
120
|
}) : null);
|
|
123
121
|
}
|
|
124
|
-
TabPanelItem.enhance = [keyboardFocusEnhance()];
|
|
125
122
|
function Text(props) {
|
|
126
123
|
var _ref3 = arguments[0], _ref7;
|
|
127
124
|
var SText = Box;
|
|
128
125
|
var styles = props.styles;
|
|
129
|
-
return _ref7 = sstyled
|
|
126
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
|
|
130
127
|
"tag": "span"
|
|
131
128
|
}, _ref3))));
|
|
132
129
|
}
|
|
@@ -134,7 +131,7 @@ function Addon(props) {
|
|
|
134
131
|
var _ref4 = arguments[0], _ref8;
|
|
135
132
|
var SAddon = Box;
|
|
136
133
|
var styles = props.styles;
|
|
137
|
-
return _ref8 = sstyled
|
|
134
|
+
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
|
|
138
135
|
"tag": "span"
|
|
139
136
|
}, _ref4))));
|
|
140
137
|
}
|
|
@@ -35,7 +35,6 @@ 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;
|
|
@@ -53,9 +52,7 @@ STabPanelItem {
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
&:active,
|
|
56
|
-
&:hover
|
|
57
|
-
&:focus {
|
|
58
|
-
outline: 0;
|
|
55
|
+
&:hover {
|
|
59
56
|
text-decoration: none;
|
|
60
57
|
}
|
|
61
58
|
|
|
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
|
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
|
|
87
|
-
STabPanelItem[keyboardFocused] {
|
|
88
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
84
|
STabPanelItem[selected] {
|
|
92
85
|
color: var(--intergalactic-text-link, #006dca);
|
|
93
86
|
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
@@ -127,4 +120,4 @@ SAddon:not(:only-child):last-child {
|
|
|
127
120
|
SAddon:only-child {
|
|
128
121
|
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
129
122
|
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
123
|
+
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
3
|
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
5
4
|
|
|
6
5
|
export type TabPanelValue = string | number | boolean;
|
|
7
6
|
|
|
@@ -31,19 +30,18 @@ export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps &
|
|
|
31
30
|
|
|
32
31
|
/** @deprecated */
|
|
33
32
|
export interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}
|
|
34
|
-
export type TabPanelItemProps = BoxProps &
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
};
|
|
33
|
+
export type TabPanelItemProps = BoxProps & {
|
|
34
|
+
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
35
|
+
selected?: boolean;
|
|
36
|
+
/** Disabled state */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Tab value */
|
|
39
|
+
value?: TabPanelValue;
|
|
40
|
+
/** Left addon tag */
|
|
41
|
+
addonLeft?: React.ElementType;
|
|
42
|
+
/** Right addon tag */
|
|
43
|
+
addonRight?: React.ElementType;
|
|
44
|
+
};
|
|
47
45
|
|
|
48
46
|
/** @deprecated */
|
|
49
47
|
export interface ITabPanelContext extends TabPanelContext, UnknownProperties {}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-panel",
|
|
3
3
|
"description": "Semrush TabPanel Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.0.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,13 +14,10 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/
|
|
18
|
-
"@semcore/flex-box": "5.41.4-prerelease.0"
|
|
17
|
+
"@semcore/flex-box": "16.0.0-prerelease.0"
|
|
19
18
|
},
|
|
20
19
|
"peerDependencies": {
|
|
21
|
-
"@semcore/
|
|
22
|
-
"react": "16.8 - 18",
|
|
23
|
-
"react-dom": "16.8 - 18"
|
|
20
|
+
"@semcore/base-components": "^16.0.0-prerelease.0"
|
|
24
21
|
},
|
|
25
22
|
"repository": {
|
|
26
23
|
"type": "git",
|