@clayui/tabs 3.75.2 → 3.77.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/lib/Item.js +3 -3
- package/lib/TabPane.js +2 -1
- package/lib/index.js +2 -2
- package/package.json +3 -3
- package/src/Item.tsx +6 -3
- package/src/TabPane.tsx +1 -0
- package/src/__tests__/__snapshots__/index.tsx.snap +8 -3
- package/src/index.tsx +1 -1
package/lib/Item.js
CHANGED
|
@@ -35,9 +35,9 @@ var Item = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
35
35
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
36
36
|
|
|
37
37
|
return /*#__PURE__*/_react.default.createElement("li", _extends({}, otherProps, {
|
|
38
|
-
className: (0, _classnames.default)('nav-item', className)
|
|
38
|
+
className: (0, _classnames.default)('nav-item', className),
|
|
39
|
+
role: "none"
|
|
39
40
|
}), /*#__PURE__*/_react.default.createElement(_shared.LinkOrButton, _extends({}, innerProps, {
|
|
40
|
-
"aria-disabled": !active,
|
|
41
41
|
"aria-selected": active,
|
|
42
42
|
buttonDisplayType: "unstyled",
|
|
43
43
|
buttonType: "button",
|
|
@@ -50,7 +50,7 @@ var Item = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
50
50
|
onClick: onClick,
|
|
51
51
|
ref: ref,
|
|
52
52
|
role: "tab",
|
|
53
|
-
tabIndex:
|
|
53
|
+
tabIndex: !active ? -1 : undefined
|
|
54
54
|
}), children));
|
|
55
55
|
});
|
|
56
56
|
|
package/lib/TabPane.js
CHANGED
package/lib/index.js
CHANGED
|
@@ -34,7 +34,7 @@ function ClayTabs(_ref) {
|
|
|
34
34
|
modern = _ref$modern === void 0 ? true : _ref$modern,
|
|
35
35
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
36
36
|
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement("ul", _extends({
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement("ul", _extends({}, otherProps, {
|
|
38
38
|
className: (0, _classnames.default)('nav', {
|
|
39
39
|
'nav-justified': justified
|
|
40
40
|
}, !displayType ? {
|
|
@@ -45,7 +45,7 @@ function ClayTabs(_ref) {
|
|
|
45
45
|
'nav-underline': displayType === 'underline'
|
|
46
46
|
}, className),
|
|
47
47
|
role: "tablist"
|
|
48
|
-
}
|
|
48
|
+
}), children);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
ClayTabs.Content = _Content.default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/tabs",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.77.0",
|
|
4
4
|
"description": "ClayTabs component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@clayui/shared": "^3.
|
|
29
|
+
"@clayui/shared": "^3.77.0",
|
|
30
30
|
"classnames": "^2.2.6"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"browserslist": [
|
|
38
38
|
"extends browserslist-config-clay"
|
|
39
39
|
],
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "edd3cfe3a397c48057632f76945b2ae9be1bfa58"
|
|
41
41
|
}
|
package/src/Item.tsx
CHANGED
|
@@ -49,10 +49,13 @@ const Item = React.forwardRef<any, IProps>(
|
|
|
49
49
|
}: IProps,
|
|
50
50
|
ref
|
|
51
51
|
) => (
|
|
52
|
-
<li
|
|
52
|
+
<li
|
|
53
|
+
{...otherProps}
|
|
54
|
+
className={classNames('nav-item', className)}
|
|
55
|
+
role="none"
|
|
56
|
+
>
|
|
53
57
|
<LinkOrButton
|
|
54
58
|
{...innerProps}
|
|
55
|
-
aria-disabled={!active}
|
|
56
59
|
aria-selected={active}
|
|
57
60
|
buttonDisplayType="unstyled"
|
|
58
61
|
buttonType="button"
|
|
@@ -66,7 +69,7 @@ const Item = React.forwardRef<any, IProps>(
|
|
|
66
69
|
onClick={onClick}
|
|
67
70
|
ref={ref}
|
|
68
71
|
role="tab"
|
|
69
|
-
tabIndex={
|
|
72
|
+
tabIndex={!active ? -1 : undefined}
|
|
70
73
|
>
|
|
71
74
|
{children}
|
|
72
75
|
</LinkOrButton>
|
package/src/TabPane.tsx
CHANGED
|
@@ -17,9 +17,9 @@ exports[`ClayTabs renders with items 1`] = `
|
|
|
17
17
|
>
|
|
18
18
|
<li
|
|
19
19
|
class="nav-item"
|
|
20
|
+
role="none"
|
|
20
21
|
>
|
|
21
22
|
<button
|
|
22
|
-
aria-disabled="false"
|
|
23
23
|
aria-selected="true"
|
|
24
24
|
class="nav-link active btn btn-unstyled"
|
|
25
25
|
data-testid="tabItem"
|
|
@@ -32,13 +32,14 @@ exports[`ClayTabs renders with items 1`] = `
|
|
|
32
32
|
<li
|
|
33
33
|
class="nav-item"
|
|
34
34
|
data-testid="tabItem2"
|
|
35
|
+
role="none"
|
|
35
36
|
>
|
|
36
37
|
<button
|
|
37
|
-
aria-disabled="true"
|
|
38
38
|
aria-selected="false"
|
|
39
39
|
class="nav-link btn btn-unstyled"
|
|
40
40
|
data-testid="tabItem"
|
|
41
41
|
role="tab"
|
|
42
|
+
tabindex="-1"
|
|
42
43
|
type="button"
|
|
43
44
|
>
|
|
44
45
|
Dummy2
|
|
@@ -46,13 +47,14 @@ exports[`ClayTabs renders with items 1`] = `
|
|
|
46
47
|
</li>
|
|
47
48
|
<li
|
|
48
49
|
class="nav-item"
|
|
50
|
+
role="none"
|
|
49
51
|
>
|
|
50
52
|
<button
|
|
51
|
-
aria-disabled="true"
|
|
52
53
|
aria-selected="false"
|
|
53
54
|
class="nav-link btn btn-unstyled"
|
|
54
55
|
data-testid="tabItem"
|
|
55
56
|
role="tab"
|
|
57
|
+
tabindex="-1"
|
|
56
58
|
type="button"
|
|
57
59
|
>
|
|
58
60
|
Dummy3
|
|
@@ -66,6 +68,7 @@ exports[`ClayTabs renders with items 1`] = `
|
|
|
66
68
|
class="tab-pane active show"
|
|
67
69
|
data-testid="tabPane1"
|
|
68
70
|
role="tabpanel"
|
|
71
|
+
tabindex="0"
|
|
69
72
|
>
|
|
70
73
|
Tab Content 1
|
|
71
74
|
</div>
|
|
@@ -73,12 +76,14 @@ exports[`ClayTabs renders with items 1`] = `
|
|
|
73
76
|
class="tab-pane"
|
|
74
77
|
data-testid="tabPane2"
|
|
75
78
|
role="tabpanel"
|
|
79
|
+
tabindex="0"
|
|
76
80
|
>
|
|
77
81
|
Tab Content 2
|
|
78
82
|
</div>
|
|
79
83
|
<div
|
|
80
84
|
class="tab-pane"
|
|
81
85
|
role="tabpanel"
|
|
86
|
+
tabindex="0"
|
|
82
87
|
>
|
|
83
88
|
Tab Content 3
|
|
84
89
|
</div>
|
package/src/index.tsx
CHANGED
|
@@ -46,6 +46,7 @@ function ClayTabs({
|
|
|
46
46
|
}: IProps) {
|
|
47
47
|
return (
|
|
48
48
|
<ul
|
|
49
|
+
{...otherProps}
|
|
49
50
|
className={classNames(
|
|
50
51
|
'nav',
|
|
51
52
|
{'nav-justified': justified},
|
|
@@ -62,7 +63,6 @@ function ClayTabs({
|
|
|
62
63
|
className
|
|
63
64
|
)}
|
|
64
65
|
role="tablist"
|
|
65
|
-
{...otherProps}
|
|
66
66
|
>
|
|
67
67
|
{children}
|
|
68
68
|
</ul>
|