@zendeskgarden/react-tabs 8.47.1 → 8.48.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 +38 -49
- package/dist/index.esm.js +16 -27
- package/dist/typings/elements/Tabs.d.ts +1 -2
- package/dist/typings/index.d.ts +1 -1
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -30,14 +30,9 @@ function ownKeys(object, enumerableOnly) {
|
|
|
30
30
|
|
|
31
31
|
if (Object.getOwnPropertySymbols) {
|
|
32
32
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
keys.push.apply(keys, symbols);
|
|
33
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
34
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
35
|
+
})), keys.push.apply(keys, symbols);
|
|
41
36
|
}
|
|
42
37
|
|
|
43
38
|
return keys;
|
|
@@ -45,19 +40,12 @@ function ownKeys(object, enumerableOnly) {
|
|
|
45
40
|
|
|
46
41
|
function _objectSpread2(target) {
|
|
47
42
|
for (var i = 1; i < arguments.length; i++) {
|
|
48
|
-
var source = arguments[i]
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
55
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
56
|
-
} else {
|
|
57
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
58
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
59
|
-
});
|
|
60
|
-
}
|
|
43
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
44
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
45
|
+
_defineProperty(target, key, source[key]);
|
|
46
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
47
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
48
|
+
});
|
|
61
49
|
}
|
|
62
50
|
|
|
63
51
|
return target;
|
|
@@ -207,10 +195,10 @@ var sizeStyles = function sizeStyles(_ref2) {
|
|
|
207
195
|
var paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
|
|
208
196
|
return styled.css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
|
|
209
197
|
};
|
|
210
|
-
var StyledTab = styled__default[
|
|
198
|
+
var StyledTab = styled__default["default"].div.attrs(function (props) {
|
|
211
199
|
return {
|
|
212
200
|
'data-garden-id': COMPONENT_ID$3,
|
|
213
|
-
'data-garden-version': '8.
|
|
201
|
+
'data-garden-version': '8.48.2',
|
|
214
202
|
'aria-disabled': props.disabled
|
|
215
203
|
};
|
|
216
204
|
}).withConfig({
|
|
@@ -238,9 +226,9 @@ StyledTab.defaultProps = {
|
|
|
238
226
|
};
|
|
239
227
|
|
|
240
228
|
var COMPONENT_ID$2 = 'tabs.tablist';
|
|
241
|
-
var StyledTabList = styled__default[
|
|
229
|
+
var StyledTabList = styled__default["default"].div.attrs({
|
|
242
230
|
'data-garden-id': COMPONENT_ID$2,
|
|
243
|
-
'data-garden-version': '8.
|
|
231
|
+
'data-garden-version': '8.48.2'
|
|
244
232
|
}).withConfig({
|
|
245
233
|
displayName: "StyledTabList",
|
|
246
234
|
componentId: "sc-wa5aaj-0"
|
|
@@ -266,9 +254,9 @@ StyledTabList.defaultProps = {
|
|
|
266
254
|
};
|
|
267
255
|
|
|
268
256
|
var COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
269
|
-
var StyledTabPanel = styled__default[
|
|
257
|
+
var StyledTabPanel = styled__default["default"].div.attrs({
|
|
270
258
|
'data-garden-id': COMPONENT_ID$1,
|
|
271
|
-
'data-garden-version': '8.
|
|
259
|
+
'data-garden-version': '8.48.2'
|
|
272
260
|
}).withConfig({
|
|
273
261
|
displayName: "StyledTabPanel",
|
|
274
262
|
componentId: "sc-7lhrmp-0"
|
|
@@ -284,9 +272,9 @@ var verticalStyling = function verticalStyling(_ref) {
|
|
|
284
272
|
var theme = _ref.theme;
|
|
285
273
|
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);
|
|
286
274
|
};
|
|
287
|
-
var StyledTabs = styled__default[
|
|
275
|
+
var StyledTabs = styled__default["default"].div.attrs({
|
|
288
276
|
'data-garden-id': COMPONENT_ID,
|
|
289
|
-
'data-garden-version': '8.
|
|
277
|
+
'data-garden-version': '8.48.2'
|
|
290
278
|
}).withConfig({
|
|
291
279
|
displayName: "StyledTabs",
|
|
292
280
|
componentId: "sc-1qaor65-0"
|
|
@@ -307,20 +295,20 @@ var useTabsContext = function useTabsContext() {
|
|
|
307
295
|
};
|
|
308
296
|
|
|
309
297
|
var _excluded$2 = ["disabled", "item"];
|
|
310
|
-
var Tab = React__default[
|
|
298
|
+
var Tab = React__default["default"].forwardRef(function (_ref, ref) {
|
|
311
299
|
var disabled = _ref.disabled,
|
|
312
300
|
item = _ref.item,
|
|
313
301
|
otherProps = _objectWithoutProperties(_ref, _excluded$2);
|
|
314
302
|
var tabsPropGetters = useTabsContext();
|
|
315
303
|
var tabRef = React.useRef();
|
|
316
304
|
if (disabled || !tabsPropGetters) {
|
|
317
|
-
return React__default[
|
|
305
|
+
return React__default["default"].createElement(StyledTab, _extends({
|
|
318
306
|
disabled: disabled,
|
|
319
|
-
ref: mergeRefs__default[
|
|
307
|
+
ref: mergeRefs__default["default"]([tabRef, ref])
|
|
320
308
|
}, otherProps));
|
|
321
309
|
}
|
|
322
|
-
return React__default[
|
|
323
|
-
ref: mergeRefs__default[
|
|
310
|
+
return React__default["default"].createElement(StyledTab, _extends({
|
|
311
|
+
ref: mergeRefs__default["default"]([tabRef, ref])
|
|
324
312
|
}, tabsPropGetters.getTabProps(_objectSpread2({
|
|
325
313
|
item: item,
|
|
326
314
|
focusRef: tabRef,
|
|
@@ -330,34 +318,34 @@ var Tab = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
330
318
|
});
|
|
331
319
|
Tab.displayName = 'Tab';
|
|
332
320
|
Tab.propTypes = {
|
|
333
|
-
disabled: PropTypes__default[
|
|
334
|
-
item: PropTypes__default[
|
|
321
|
+
disabled: PropTypes__default["default"].bool,
|
|
322
|
+
item: PropTypes__default["default"].any
|
|
335
323
|
};
|
|
336
324
|
|
|
337
|
-
var TabList = React__default[
|
|
325
|
+
var TabList = React__default["default"].forwardRef(function (props, ref) {
|
|
338
326
|
var tabsPropGetters = useTabsContext();
|
|
339
327
|
if (!tabsPropGetters) {
|
|
340
|
-
return React__default[
|
|
328
|
+
return React__default["default"].createElement(StyledTabList, _extends({
|
|
341
329
|
ref: ref
|
|
342
330
|
}, props));
|
|
343
331
|
}
|
|
344
|
-
return React__default[
|
|
332
|
+
return React__default["default"].createElement(StyledTabList, tabsPropGetters.getTabListProps(_objectSpread2({
|
|
345
333
|
ref: ref
|
|
346
334
|
}, props)));
|
|
347
335
|
});
|
|
348
336
|
TabList.displayName = 'TabList';
|
|
349
337
|
|
|
350
338
|
var _excluded$1 = ["item"];
|
|
351
|
-
var TabPanel = React__default[
|
|
339
|
+
var TabPanel = React__default["default"].forwardRef(function (_ref, ref) {
|
|
352
340
|
var item = _ref.item,
|
|
353
341
|
otherProps = _objectWithoutProperties(_ref, _excluded$1);
|
|
354
342
|
var tabsPropGetters = useTabsContext();
|
|
355
343
|
if (!tabsPropGetters) {
|
|
356
|
-
return React__default[
|
|
344
|
+
return React__default["default"].createElement(StyledTabPanel, _extends({
|
|
357
345
|
ref: ref
|
|
358
346
|
}, otherProps));
|
|
359
347
|
}
|
|
360
|
-
return React__default[
|
|
348
|
+
return React__default["default"].createElement(StyledTabPanel, tabsPropGetters.getTabPanelProps(_objectSpread2({
|
|
361
349
|
item: item,
|
|
362
350
|
ref: ref,
|
|
363
351
|
index: tabsPropGetters.tabPanelIndexRef.current++,
|
|
@@ -366,11 +354,11 @@ var TabPanel = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
366
354
|
});
|
|
367
355
|
TabPanel.displayName = 'TabPanel';
|
|
368
356
|
TabPanel.propTypes = {
|
|
369
|
-
item: PropTypes__default[
|
|
357
|
+
item: PropTypes__default["default"].any
|
|
370
358
|
};
|
|
371
359
|
|
|
372
360
|
var _excluded = ["isVertical", "children", "onChange", "selectedItem"];
|
|
373
|
-
var Tabs =
|
|
361
|
+
var Tabs = React.forwardRef(function (_ref, ref) {
|
|
374
362
|
var isVertical = _ref.isVertical,
|
|
375
363
|
children = _ref.children,
|
|
376
364
|
onChange = _ref.onChange,
|
|
@@ -403,22 +391,23 @@ var Tabs = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
403
391
|
tabPanelIndexRef: tabPanelIndexRef
|
|
404
392
|
});
|
|
405
393
|
}, [tabPropGetters]);
|
|
406
|
-
return React__default[
|
|
394
|
+
return React__default["default"].createElement(TabsContext.Provider, {
|
|
407
395
|
value: tabsContextValue
|
|
408
|
-
}, React__default[
|
|
396
|
+
}, React__default["default"].createElement(StyledTabs, _extends({
|
|
409
397
|
isVertical: isVertical
|
|
410
398
|
}, otherProps, {
|
|
411
399
|
ref: ref
|
|
412
400
|
}), children));
|
|
413
401
|
});
|
|
414
402
|
Tabs.propTypes = {
|
|
415
|
-
isVertical: PropTypes__default[
|
|
416
|
-
selectedItem: PropTypes__default[
|
|
417
|
-
onChange: PropTypes__default[
|
|
403
|
+
isVertical: PropTypes__default["default"].bool,
|
|
404
|
+
selectedItem: PropTypes__default["default"].any,
|
|
405
|
+
onChange: PropTypes__default["default"].func
|
|
418
406
|
};
|
|
419
407
|
Tabs.defaultProps = {
|
|
420
408
|
isVertical: false
|
|
421
409
|
};
|
|
410
|
+
Tabs.displayName = 'Tabs';
|
|
422
411
|
|
|
423
412
|
exports.Tab = Tab;
|
|
424
413
|
exports.TabList = TabList;
|
package/dist/index.esm.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React, { createContext, useContext, useRef, useState, useMemo } from 'react';
|
|
8
|
+
import React, { createContext, useContext, useRef, forwardRef, useState, useMemo } from 'react';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import mergeRefs from 'react-merge-refs';
|
|
11
11
|
import styled, { css, ThemeContext } from 'styled-components';
|
|
@@ -19,14 +19,9 @@ function ownKeys(object, enumerableOnly) {
|
|
|
19
19
|
|
|
20
20
|
if (Object.getOwnPropertySymbols) {
|
|
21
21
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
keys.push.apply(keys, symbols);
|
|
22
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
23
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
24
|
+
})), keys.push.apply(keys, symbols);
|
|
30
25
|
}
|
|
31
26
|
|
|
32
27
|
return keys;
|
|
@@ -34,19 +29,12 @@ function ownKeys(object, enumerableOnly) {
|
|
|
34
29
|
|
|
35
30
|
function _objectSpread2(target) {
|
|
36
31
|
for (var i = 1; i < arguments.length; i++) {
|
|
37
|
-
var source = arguments[i]
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
44
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
45
|
-
} else {
|
|
46
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
47
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
48
|
-
});
|
|
49
|
-
}
|
|
32
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
33
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
34
|
+
_defineProperty(target, key, source[key]);
|
|
35
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
36
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
37
|
+
});
|
|
50
38
|
}
|
|
51
39
|
|
|
52
40
|
return target;
|
|
@@ -199,7 +187,7 @@ var sizeStyles = function sizeStyles(_ref2) {
|
|
|
199
187
|
var StyledTab = styled.div.attrs(function (props) {
|
|
200
188
|
return {
|
|
201
189
|
'data-garden-id': COMPONENT_ID$3,
|
|
202
|
-
'data-garden-version': '8.
|
|
190
|
+
'data-garden-version': '8.48.2',
|
|
203
191
|
'aria-disabled': props.disabled
|
|
204
192
|
};
|
|
205
193
|
}).withConfig({
|
|
@@ -229,7 +217,7 @@ StyledTab.defaultProps = {
|
|
|
229
217
|
var COMPONENT_ID$2 = 'tabs.tablist';
|
|
230
218
|
var StyledTabList = styled.div.attrs({
|
|
231
219
|
'data-garden-id': COMPONENT_ID$2,
|
|
232
|
-
'data-garden-version': '8.
|
|
220
|
+
'data-garden-version': '8.48.2'
|
|
233
221
|
}).withConfig({
|
|
234
222
|
displayName: "StyledTabList",
|
|
235
223
|
componentId: "sc-wa5aaj-0"
|
|
@@ -257,7 +245,7 @@ StyledTabList.defaultProps = {
|
|
|
257
245
|
var COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
258
246
|
var StyledTabPanel = styled.div.attrs({
|
|
259
247
|
'data-garden-id': COMPONENT_ID$1,
|
|
260
|
-
'data-garden-version': '8.
|
|
248
|
+
'data-garden-version': '8.48.2'
|
|
261
249
|
}).withConfig({
|
|
262
250
|
displayName: "StyledTabPanel",
|
|
263
251
|
componentId: "sc-7lhrmp-0"
|
|
@@ -275,7 +263,7 @@ var verticalStyling = function verticalStyling(_ref) {
|
|
|
275
263
|
};
|
|
276
264
|
var StyledTabs = styled.div.attrs({
|
|
277
265
|
'data-garden-id': COMPONENT_ID,
|
|
278
|
-
'data-garden-version': '8.
|
|
266
|
+
'data-garden-version': '8.48.2'
|
|
279
267
|
}).withConfig({
|
|
280
268
|
displayName: "StyledTabs",
|
|
281
269
|
componentId: "sc-1qaor65-0"
|
|
@@ -359,7 +347,7 @@ TabPanel.propTypes = {
|
|
|
359
347
|
};
|
|
360
348
|
|
|
361
349
|
var _excluded = ["isVertical", "children", "onChange", "selectedItem"];
|
|
362
|
-
var Tabs =
|
|
350
|
+
var Tabs = forwardRef(function (_ref, ref) {
|
|
363
351
|
var isVertical = _ref.isVertical,
|
|
364
352
|
children = _ref.children,
|
|
365
353
|
onChange = _ref.onChange,
|
|
@@ -408,5 +396,6 @@ Tabs.propTypes = {
|
|
|
408
396
|
Tabs.defaultProps = {
|
|
409
397
|
isVertical: false
|
|
410
398
|
};
|
|
399
|
+
Tabs.displayName = 'Tabs';
|
|
411
400
|
|
|
412
401
|
export { Tab, TabList, TabPanel, Tabs };
|
|
@@ -24,5 +24,4 @@ export interface ITabsProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
24
24
|
/**
|
|
25
25
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
26
26
|
*/
|
|
27
|
-
declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
-
export default Tabs;
|
|
27
|
+
export declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -9,5 +9,5 @@ export type { ITabProps } from './elements/Tab';
|
|
|
9
9
|
export { TabList } from './elements/TabList';
|
|
10
10
|
export { TabPanel } from './elements/TabPanel';
|
|
11
11
|
export type { ITabPanelProps } from './elements/TabPanel';
|
|
12
|
-
export {
|
|
12
|
+
export { Tabs } from './elements/Tabs';
|
|
13
13
|
export type { ITabsProps } from './elements/Tabs';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tabs",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.48.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>",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-tabs": "^0.5.8",
|
|
25
|
-
"@zendeskgarden/container-utilities": "^0.
|
|
25
|
+
"@zendeskgarden/container-utilities": "^0.7.0",
|
|
26
26
|
"polished": "^4.0.0",
|
|
27
27
|
"prop-types": "^15.5.7",
|
|
28
28
|
"react-merge-refs": "^1.1.0"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^8.
|
|
37
|
+
"@zendeskgarden/react-theming": "^8.48.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": "c514c351b0973fe1f9853853c536d4fac10f4ce4"
|
|
50
50
|
}
|