@zendeskgarden/react-tabs 8.62.1 → 8.62.2
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/dist/index.cjs.js +33 -35
- package/dist/index.esm.js +4 -4
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var React = require('react');
|
|
13
11
|
var PropTypes = require('prop-types');
|
|
14
12
|
var mergeRefs = require('react-merge-refs');
|
|
@@ -18,12 +16,12 @@ var polished = require('polished');
|
|
|
18
16
|
var containerTabs = require('@zendeskgarden/container-tabs');
|
|
19
17
|
var containerUtilities = require('@zendeskgarden/container-utilities');
|
|
20
18
|
|
|
21
|
-
function
|
|
19
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
20
|
|
|
23
|
-
var React__default = /*#__PURE__*/
|
|
24
|
-
var PropTypes__default = /*#__PURE__*/
|
|
25
|
-
var mergeRefs__default = /*#__PURE__*/
|
|
26
|
-
var styled__default = /*#__PURE__*/
|
|
21
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
22
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
23
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
24
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
27
25
|
|
|
28
26
|
function _extends() {
|
|
29
27
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -58,9 +56,9 @@ const sizeStyles = _ref2 => {
|
|
|
58
56
|
const paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
|
|
59
57
|
return styled.css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
|
|
60
58
|
};
|
|
61
|
-
const StyledTab = styled__default
|
|
59
|
+
const StyledTab = styled__default.default.div.attrs({
|
|
62
60
|
'data-garden-id': COMPONENT_ID$3,
|
|
63
|
-
'data-garden-version': '8.62.
|
|
61
|
+
'data-garden-version': '8.62.2'
|
|
64
62
|
}).withConfig({
|
|
65
63
|
displayName: "StyledTab",
|
|
66
64
|
componentId: "sc-x2pbow-0"
|
|
@@ -70,9 +68,9 @@ StyledTab.defaultProps = {
|
|
|
70
68
|
};
|
|
71
69
|
|
|
72
70
|
const COMPONENT_ID$2 = 'tabs.tablist';
|
|
73
|
-
const StyledTabList = styled__default
|
|
71
|
+
const StyledTabList = styled__default.default.div.attrs({
|
|
74
72
|
'data-garden-id': COMPONENT_ID$2,
|
|
75
|
-
'data-garden-version': '8.62.
|
|
73
|
+
'data-garden-version': '8.62.2'
|
|
76
74
|
}).withConfig({
|
|
77
75
|
displayName: "StyledTabList",
|
|
78
76
|
componentId: "sc-wa5aaj-0"
|
|
@@ -82,9 +80,9 @@ StyledTabList.defaultProps = {
|
|
|
82
80
|
};
|
|
83
81
|
|
|
84
82
|
const COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
85
|
-
const StyledTabPanel = styled__default
|
|
83
|
+
const StyledTabPanel = styled__default.default.div.attrs({
|
|
86
84
|
'data-garden-id': COMPONENT_ID$1,
|
|
87
|
-
'data-garden-version': '8.62.
|
|
85
|
+
'data-garden-version': '8.62.2'
|
|
88
86
|
}).withConfig({
|
|
89
87
|
displayName: "StyledTabPanel",
|
|
90
88
|
componentId: "sc-7lhrmp-0"
|
|
@@ -100,9 +98,9 @@ const verticalStyling = _ref => {
|
|
|
100
98
|
} = _ref;
|
|
101
99
|
return styled.css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
|
|
102
100
|
};
|
|
103
|
-
const StyledTabs = styled__default
|
|
101
|
+
const StyledTabs = styled__default.default.div.attrs({
|
|
104
102
|
'data-garden-id': COMPONENT_ID,
|
|
105
|
-
'data-garden-version': '8.62.
|
|
103
|
+
'data-garden-version': '8.62.2'
|
|
106
104
|
}).withConfig({
|
|
107
105
|
displayName: "StyledTabs",
|
|
108
106
|
componentId: "sc-1qaor65-0"
|
|
@@ -116,19 +114,19 @@ const useTabsContext = () => {
|
|
|
116
114
|
return React.useContext(TabsContext);
|
|
117
115
|
};
|
|
118
116
|
|
|
119
|
-
const Tab = React__default
|
|
117
|
+
const Tab = React__default.default.forwardRef((_ref, ref) => {
|
|
120
118
|
let {
|
|
121
119
|
disabled,
|
|
122
120
|
item,
|
|
123
121
|
...otherProps
|
|
124
122
|
} = _ref;
|
|
125
123
|
const tabsPropGetters = useTabsContext();
|
|
126
|
-
const tabRef = React__default
|
|
124
|
+
const tabRef = React__default.default.createRef();
|
|
127
125
|
if (disabled || !tabsPropGetters) {
|
|
128
|
-
return React__default
|
|
126
|
+
return React__default.default.createElement(StyledTab, _extends({
|
|
129
127
|
role: "tab",
|
|
130
128
|
"aria-disabled": disabled,
|
|
131
|
-
ref: mergeRefs__default
|
|
129
|
+
ref: mergeRefs__default.default([tabRef, ref])
|
|
132
130
|
}, otherProps));
|
|
133
131
|
}
|
|
134
132
|
const tabProps = tabsPropGetters.getTabProps({
|
|
@@ -136,40 +134,40 @@ const Tab = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
136
134
|
focusRef: tabRef,
|
|
137
135
|
index: tabsPropGetters.tabIndexRef.current++
|
|
138
136
|
});
|
|
139
|
-
return React__default
|
|
137
|
+
return React__default.default.createElement(StyledTab, _extends({
|
|
140
138
|
isSelected: item === tabsPropGetters.selectedItem
|
|
141
139
|
}, tabProps, otherProps, {
|
|
142
|
-
ref: mergeRefs__default
|
|
140
|
+
ref: mergeRefs__default.default([tabRef, ref])
|
|
143
141
|
}));
|
|
144
142
|
});
|
|
145
143
|
Tab.displayName = 'Tab';
|
|
146
144
|
Tab.propTypes = {
|
|
147
|
-
disabled: PropTypes__default
|
|
148
|
-
item: PropTypes__default
|
|
145
|
+
disabled: PropTypes__default.default.bool,
|
|
146
|
+
item: PropTypes__default.default.any
|
|
149
147
|
};
|
|
150
148
|
|
|
151
|
-
const TabList = React__default
|
|
149
|
+
const TabList = React__default.default.forwardRef((props, ref) => {
|
|
152
150
|
const tabsPropGetters = useTabsContext();
|
|
153
151
|
if (!tabsPropGetters) {
|
|
154
|
-
return React__default
|
|
152
|
+
return React__default.default.createElement(StyledTabList, _extends({
|
|
155
153
|
ref: ref
|
|
156
154
|
}, props));
|
|
157
155
|
}
|
|
158
156
|
const tabListProps = tabsPropGetters.getTabListProps();
|
|
159
|
-
return React__default
|
|
157
|
+
return React__default.default.createElement(StyledTabList, _extends({}, tabListProps, props, {
|
|
160
158
|
ref: ref
|
|
161
159
|
}));
|
|
162
160
|
});
|
|
163
161
|
TabList.displayName = 'TabList';
|
|
164
162
|
|
|
165
|
-
const TabPanel = React__default
|
|
163
|
+
const TabPanel = React__default.default.forwardRef((_ref, ref) => {
|
|
166
164
|
let {
|
|
167
165
|
item,
|
|
168
166
|
...otherProps
|
|
169
167
|
} = _ref;
|
|
170
168
|
const tabsPropGetters = useTabsContext();
|
|
171
169
|
if (!tabsPropGetters) {
|
|
172
|
-
return React__default
|
|
170
|
+
return React__default.default.createElement(StyledTabPanel, _extends({
|
|
173
171
|
ref: ref
|
|
174
172
|
}, otherProps));
|
|
175
173
|
}
|
|
@@ -177,7 +175,7 @@ const TabPanel = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
177
175
|
item,
|
|
178
176
|
index: tabsPropGetters.tabPanelIndexRef.current++
|
|
179
177
|
});
|
|
180
|
-
return React__default
|
|
178
|
+
return React__default.default.createElement(StyledTabPanel, _extends({
|
|
181
179
|
"aria-hidden": tabsPropGetters.selectedItem !== item
|
|
182
180
|
}, tabPanelProps, otherProps, {
|
|
183
181
|
ref: ref
|
|
@@ -185,7 +183,7 @@ const TabPanel = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
185
183
|
});
|
|
186
184
|
TabPanel.displayName = 'TabPanel';
|
|
187
185
|
TabPanel.propTypes = {
|
|
188
|
-
item: PropTypes__default
|
|
186
|
+
item: PropTypes__default.default.any
|
|
189
187
|
};
|
|
190
188
|
|
|
191
189
|
const Tabs = React.forwardRef((_ref, ref) => {
|
|
@@ -219,18 +217,18 @@ const Tabs = React.forwardRef((_ref, ref) => {
|
|
|
219
217
|
tabIndexRef,
|
|
220
218
|
tabPanelIndexRef
|
|
221
219
|
}), [tabPropGetters]);
|
|
222
|
-
return React__default
|
|
220
|
+
return React__default.default.createElement(TabsContext.Provider, {
|
|
223
221
|
value: tabsContextValue
|
|
224
|
-
}, React__default
|
|
222
|
+
}, React__default.default.createElement(StyledTabs, _extends({
|
|
225
223
|
isVertical: isVertical
|
|
226
224
|
}, otherProps, {
|
|
227
225
|
ref: ref
|
|
228
226
|
}), children));
|
|
229
227
|
});
|
|
230
228
|
Tabs.propTypes = {
|
|
231
|
-
isVertical: PropTypes__default
|
|
232
|
-
selectedItem: PropTypes__default
|
|
233
|
-
onChange: PropTypes__default
|
|
229
|
+
isVertical: PropTypes__default.default.bool,
|
|
230
|
+
selectedItem: PropTypes__default.default.any,
|
|
231
|
+
onChange: PropTypes__default.default.func
|
|
234
232
|
};
|
|
235
233
|
Tabs.defaultProps = {
|
|
236
234
|
isVertical: false
|
package/dist/index.esm.js
CHANGED
|
@@ -49,7 +49,7 @@ const sizeStyles = _ref2 => {
|
|
|
49
49
|
};
|
|
50
50
|
const StyledTab = styled.div.attrs({
|
|
51
51
|
'data-garden-id': COMPONENT_ID$3,
|
|
52
|
-
'data-garden-version': '8.62.
|
|
52
|
+
'data-garden-version': '8.62.2'
|
|
53
53
|
}).withConfig({
|
|
54
54
|
displayName: "StyledTab",
|
|
55
55
|
componentId: "sc-x2pbow-0"
|
|
@@ -61,7 +61,7 @@ StyledTab.defaultProps = {
|
|
|
61
61
|
const COMPONENT_ID$2 = 'tabs.tablist';
|
|
62
62
|
const StyledTabList = styled.div.attrs({
|
|
63
63
|
'data-garden-id': COMPONENT_ID$2,
|
|
64
|
-
'data-garden-version': '8.62.
|
|
64
|
+
'data-garden-version': '8.62.2'
|
|
65
65
|
}).withConfig({
|
|
66
66
|
displayName: "StyledTabList",
|
|
67
67
|
componentId: "sc-wa5aaj-0"
|
|
@@ -73,7 +73,7 @@ StyledTabList.defaultProps = {
|
|
|
73
73
|
const COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
74
74
|
const StyledTabPanel = styled.div.attrs({
|
|
75
75
|
'data-garden-id': COMPONENT_ID$1,
|
|
76
|
-
'data-garden-version': '8.62.
|
|
76
|
+
'data-garden-version': '8.62.2'
|
|
77
77
|
}).withConfig({
|
|
78
78
|
displayName: "StyledTabPanel",
|
|
79
79
|
componentId: "sc-7lhrmp-0"
|
|
@@ -91,7 +91,7 @@ const verticalStyling = _ref => {
|
|
|
91
91
|
};
|
|
92
92
|
const StyledTabs = styled.div.attrs({
|
|
93
93
|
'data-garden-id': COMPONENT_ID,
|
|
94
|
-
'data-garden-version': '8.62.
|
|
94
|
+
'data-garden-version': '8.62.2'
|
|
95
95
|
}).withConfig({
|
|
96
96
|
displayName: "StyledTabs",
|
|
97
97
|
componentId: "sc-1qaor65-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tabs",
|
|
3
|
-
"version": "8.62.
|
|
3
|
+
"version": "8.62.2",
|
|
4
4
|
"description": "Components and render prop containers relating to the Garden Design System.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^8.62.
|
|
37
|
+
"@zendeskgarden/react-theming": "^8.62.2"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
40
40
|
"components",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
|
|
50
50
|
}
|