@zendeskgarden/react-tabs 8.66.0 → 8.68.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/dist/index.cjs.js +16 -7
- package/dist/index.esm.js +17 -8
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -45,7 +45,16 @@ const colorStyles = _ref => {
|
|
|
45
45
|
isSelected
|
|
46
46
|
} = _ref;
|
|
47
47
|
const selectedColor = reactTheming.getColor('primaryHue', 600, theme);
|
|
48
|
-
return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[
|
|
48
|
+
return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentColor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, reactTheming.focusStyles({
|
|
49
|
+
theme,
|
|
50
|
+
inset: true,
|
|
51
|
+
spacerWidth: null,
|
|
52
|
+
shadowWidth: 'sm',
|
|
53
|
+
selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
|
|
54
|
+
styles: {
|
|
55
|
+
color: selectedColor
|
|
56
|
+
}
|
|
57
|
+
}), selectedColor, props => reactTheming.getColor('neutralHue', 400, props.theme));
|
|
49
58
|
};
|
|
50
59
|
const sizeStyles = _ref2 => {
|
|
51
60
|
let {
|
|
@@ -58,11 +67,11 @@ const sizeStyles = _ref2 => {
|
|
|
58
67
|
};
|
|
59
68
|
const StyledTab = styled__default.default.div.attrs({
|
|
60
69
|
'data-garden-id': COMPONENT_ID$3,
|
|
61
|
-
'data-garden-version': '8.
|
|
70
|
+
'data-garden-version': '8.68.0'
|
|
62
71
|
}).withConfig({
|
|
63
72
|
displayName: "StyledTab",
|
|
64
73
|
componentId: "sc-x2pbow-0"
|
|
65
|
-
})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{
|
|
74
|
+
})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
66
75
|
StyledTab.defaultProps = {
|
|
67
76
|
theme: reactTheming.DEFAULT_THEME
|
|
68
77
|
};
|
|
@@ -70,7 +79,7 @@ StyledTab.defaultProps = {
|
|
|
70
79
|
const COMPONENT_ID$2 = 'tabs.tablist';
|
|
71
80
|
const StyledTabList = styled__default.default.div.attrs({
|
|
72
81
|
'data-garden-id': COMPONENT_ID$2,
|
|
73
|
-
'data-garden-version': '8.
|
|
82
|
+
'data-garden-version': '8.68.0'
|
|
74
83
|
}).withConfig({
|
|
75
84
|
displayName: "StyledTabList",
|
|
76
85
|
componentId: "sc-wa5aaj-0"
|
|
@@ -82,7 +91,7 @@ StyledTabList.defaultProps = {
|
|
|
82
91
|
const COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
83
92
|
const StyledTabPanel = styled__default.default.div.attrs({
|
|
84
93
|
'data-garden-id': COMPONENT_ID$1,
|
|
85
|
-
'data-garden-version': '8.
|
|
94
|
+
'data-garden-version': '8.68.0'
|
|
86
95
|
}).withConfig({
|
|
87
96
|
displayName: "StyledTabPanel",
|
|
88
97
|
componentId: "sc-7lhrmp-0"
|
|
@@ -96,11 +105,11 @@ const verticalStyling = _ref => {
|
|
|
96
105
|
let {
|
|
97
106
|
theme
|
|
98
107
|
} = _ref;
|
|
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;}
|
|
108
|
+
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;}&:focus-visible::before,&[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);
|
|
100
109
|
};
|
|
101
110
|
const StyledTabs = styled__default.default.div.attrs({
|
|
102
111
|
'data-garden-id': COMPONENT_ID,
|
|
103
|
-
'data-garden-version': '8.
|
|
112
|
+
'data-garden-version': '8.68.0'
|
|
104
113
|
}).withConfig({
|
|
105
114
|
displayName: "StyledTabs",
|
|
106
115
|
componentId: "sc-1qaor65-0"
|
package/dist/index.esm.js
CHANGED
|
@@ -9,7 +9,7 @@ import React, { createContext, useContext, forwardRef, useState, useRef, useMemo
|
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import mergeRefs from 'react-merge-refs';
|
|
11
11
|
import styled, { css, ThemeContext } from 'styled-components';
|
|
12
|
-
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
12
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
13
13
|
import { stripUnit } from 'polished';
|
|
14
14
|
import { useTabs } from '@zendeskgarden/container-tabs';
|
|
15
15
|
import { getControlledValue } from '@zendeskgarden/container-utilities';
|
|
@@ -36,7 +36,16 @@ const colorStyles = _ref => {
|
|
|
36
36
|
isSelected
|
|
37
37
|
} = _ref;
|
|
38
38
|
const selectedColor = getColor('primaryHue', 600, theme);
|
|
39
|
-
return css(["border-color:", ";color:", ";&:hover{color:", ";}&:active{border-color:currentColor;color:", ";}&[
|
|
39
|
+
return css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentColor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentColor !important', isSelected ? selectedColor : 'inherit', selectedColor, focusStyles({
|
|
40
|
+
theme,
|
|
41
|
+
inset: true,
|
|
42
|
+
spacerWidth: null,
|
|
43
|
+
shadowWidth: 'sm',
|
|
44
|
+
selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
|
|
45
|
+
styles: {
|
|
46
|
+
color: selectedColor
|
|
47
|
+
}
|
|
48
|
+
}), selectedColor, props => getColor('neutralHue', 400, props.theme));
|
|
40
49
|
};
|
|
41
50
|
const sizeStyles = _ref2 => {
|
|
42
51
|
let {
|
|
@@ -49,11 +58,11 @@ const sizeStyles = _ref2 => {
|
|
|
49
58
|
};
|
|
50
59
|
const StyledTab = styled.div.attrs({
|
|
51
60
|
'data-garden-id': COMPONENT_ID$3,
|
|
52
|
-
'data-garden-version': '8.
|
|
61
|
+
'data-garden-version': '8.68.0'
|
|
53
62
|
}).withConfig({
|
|
54
63
|
displayName: "StyledTab",
|
|
55
64
|
componentId: "sc-x2pbow-0"
|
|
56
|
-
})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{
|
|
65
|
+
})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
57
66
|
StyledTab.defaultProps = {
|
|
58
67
|
theme: DEFAULT_THEME
|
|
59
68
|
};
|
|
@@ -61,7 +70,7 @@ StyledTab.defaultProps = {
|
|
|
61
70
|
const COMPONENT_ID$2 = 'tabs.tablist';
|
|
62
71
|
const StyledTabList = styled.div.attrs({
|
|
63
72
|
'data-garden-id': COMPONENT_ID$2,
|
|
64
|
-
'data-garden-version': '8.
|
|
73
|
+
'data-garden-version': '8.68.0'
|
|
65
74
|
}).withConfig({
|
|
66
75
|
displayName: "StyledTabList",
|
|
67
76
|
componentId: "sc-wa5aaj-0"
|
|
@@ -73,7 +82,7 @@ StyledTabList.defaultProps = {
|
|
|
73
82
|
const COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
74
83
|
const StyledTabPanel = styled.div.attrs({
|
|
75
84
|
'data-garden-id': COMPONENT_ID$1,
|
|
76
|
-
'data-garden-version': '8.
|
|
85
|
+
'data-garden-version': '8.68.0'
|
|
77
86
|
}).withConfig({
|
|
78
87
|
displayName: "StyledTabPanel",
|
|
79
88
|
componentId: "sc-7lhrmp-0"
|
|
@@ -87,11 +96,11 @@ const verticalStyling = _ref => {
|
|
|
87
96
|
let {
|
|
88
97
|
theme
|
|
89
98
|
} = _ref;
|
|
90
|
-
return 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;}
|
|
99
|
+
return 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;}&:focus-visible::before,&[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);
|
|
91
100
|
};
|
|
92
101
|
const StyledTabs = styled.div.attrs({
|
|
93
102
|
'data-garden-id': COMPONENT_ID,
|
|
94
|
-
'data-garden-version': '8.
|
|
103
|
+
'data-garden-version': '8.68.0'
|
|
95
104
|
}).withConfig({
|
|
96
105
|
displayName: "StyledTabs",
|
|
97
106
|
componentId: "sc-1qaor65-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tabs",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.68.0",
|
|
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>",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"react-merge-refs": "^1.1.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@zendeskgarden/react-theming": "^8.
|
|
31
|
+
"@zendeskgarden/react-theming": "^8.67.0",
|
|
32
32
|
"react": ">=16.8.0",
|
|
33
33
|
"react-dom": ">=16.8.0",
|
|
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.68.0"
|
|
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": "e05a28d586f47d95e0570fe2d529915aa4285845"
|
|
50
50
|
}
|