carbon-react 114.8.0 → 114.9.1
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/esm/__internal__/popover/popover.component.js +1 -1
- package/esm/components/tabs/__internal__/tab-title/tab-title.component.js +5 -0
- package/esm/components/tabs/__internal__/tab-title/tab-title.d.ts +2 -0
- package/esm/components/tabs/tab/tab.component.js +8 -1
- package/esm/components/tabs/tab/tab.d.ts +5 -0
- package/esm/components/tabs/tabs.component.js +16 -23
- package/lib/__internal__/popover/popover.component.js +1 -1
- package/lib/components/tabs/__internal__/tab-title/tab-title.component.js +5 -0
- package/lib/components/tabs/__internal__/tab-title/tab-title.d.ts +2 -0
- package/lib/components/tabs/tab/tab.component.js +8 -1
- package/lib/components/tabs/tab/tab.d.ts +5 -0
- package/lib/components/tabs/tabs.component.js +16 -24
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export const TabTitleContext = /*#__PURE__*/React.createContext({});
|
|
|
13
13
|
const TabTitle = /*#__PURE__*/React.forwardRef(({
|
|
14
14
|
isTabSelected,
|
|
15
15
|
dataTabId,
|
|
16
|
+
"data-role": dataRole,
|
|
16
17
|
title,
|
|
17
18
|
position = "top",
|
|
18
19
|
error,
|
|
@@ -127,6 +128,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
|
|
|
127
128
|
"aria-selected": isTabSelected,
|
|
128
129
|
"data-element": "select-tab",
|
|
129
130
|
"data-tabid": dataTabId,
|
|
131
|
+
"data-role": dataRole,
|
|
130
132
|
role: "tab",
|
|
131
133
|
position: position,
|
|
132
134
|
isTabSelected: isTabSelected,
|
|
@@ -201,6 +203,9 @@ TabTitle.propTypes = {
|
|
|
201
203
|
isTabSelected: PropTypes.bool,
|
|
202
204
|
position: PropTypes.oneOf(["top", "left"]),
|
|
203
205
|
className: PropTypes.string,
|
|
206
|
+
|
|
207
|
+
/** Identifier used for testing purposes */
|
|
208
|
+
"data-role": PropTypes.string,
|
|
204
209
|
dataTabId: PropTypes.string,
|
|
205
210
|
id: PropTypes.string,
|
|
206
211
|
onClick: PropTypes.func,
|
|
@@ -22,6 +22,7 @@ const Tab = ({
|
|
|
22
22
|
updateInfos,
|
|
23
23
|
href,
|
|
24
24
|
title,
|
|
25
|
+
titleProps,
|
|
25
26
|
...rest
|
|
26
27
|
}) => {
|
|
27
28
|
const [tabErrors, setTabErrors] = useState({});
|
|
@@ -124,7 +125,13 @@ Tab.propTypes = { ...paddingPropTypes,
|
|
|
124
125
|
titlePosition: PropTypes.oneOf(["before", "after"]),
|
|
125
126
|
|
|
126
127
|
/** Allows Tab to be a link */
|
|
127
|
-
href: PropTypes.string
|
|
128
|
+
href: PropTypes.string,
|
|
129
|
+
|
|
130
|
+
/** Additional props to be passed to the Tab's corresponding title */
|
|
131
|
+
titleProps: PropTypes.shape({
|
|
132
|
+
/** Identifier used for testing purposes */
|
|
133
|
+
"data-role": PropTypes.string
|
|
134
|
+
})
|
|
128
135
|
};
|
|
129
136
|
export { TabContext };
|
|
130
137
|
export default Tab;
|
|
@@ -32,6 +32,11 @@ export interface TabProps extends PaddingProps {
|
|
|
32
32
|
href?: string;
|
|
33
33
|
/** Overrides default layout with a one defined in this prop */
|
|
34
34
|
customLayout?: React.ReactNode;
|
|
35
|
+
/** Additional props to be passed to the Tab's corresponding title. */
|
|
36
|
+
titleProps?: {
|
|
37
|
+
/** Identifier used for testing purposes */
|
|
38
|
+
"data-role"?: string;
|
|
39
|
+
};
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
export interface TabAllProps {
|
|
@@ -170,7 +170,8 @@ const Tabs = ({
|
|
|
170
170
|
warningMessage,
|
|
171
171
|
infoMessage,
|
|
172
172
|
href,
|
|
173
|
-
customLayout
|
|
173
|
+
customLayout,
|
|
174
|
+
titleProps
|
|
174
175
|
} = child.props;
|
|
175
176
|
const refId = `${tabId}-tab`;
|
|
176
177
|
const errors = tabsErrors[tabId];
|
|
@@ -201,7 +202,7 @@ const Tabs = ({
|
|
|
201
202
|
return summaryOfMessages.map(value => `• ${value}`).join("\n");
|
|
202
203
|
};
|
|
203
204
|
|
|
204
|
-
|
|
205
|
+
return /*#__PURE__*/React.createElement(TabTitle, _extends({}, titleProps, {
|
|
205
206
|
position: isInSidebar ? "left" : position,
|
|
206
207
|
className: child.props.className || "",
|
|
207
208
|
dataTabId: tabId,
|
|
@@ -230,8 +231,7 @@ const Tabs = ({
|
|
|
230
231
|
customLayout: customLayout,
|
|
231
232
|
isInSidebar: isInSidebar,
|
|
232
233
|
align: align
|
|
233
|
-
});
|
|
234
|
-
return tabTitle;
|
|
234
|
+
}));
|
|
235
235
|
});
|
|
236
236
|
return /*#__PURE__*/React.createElement(TabsHeader, {
|
|
237
237
|
align: align,
|
|
@@ -243,22 +243,6 @@ const Tabs = ({
|
|
|
243
243
|
isInSidebar: isInSidebar
|
|
244
244
|
}, tabTitles);
|
|
245
245
|
};
|
|
246
|
-
/** Builds the single currently selected tab */
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
const visibleTab = () => {
|
|
250
|
-
const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
|
|
251
|
-
return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
|
|
252
|
-
role: "tabpanel",
|
|
253
|
-
position,
|
|
254
|
-
isTabSelected: isTabSelected(tab.props.tabId),
|
|
255
|
-
key: `${tab.props.tabId}-tab`,
|
|
256
|
-
ariaLabelledby: `${tab.props.tabId}-tab`,
|
|
257
|
-
updateErrors,
|
|
258
|
-
updateWarnings,
|
|
259
|
-
updateInfos
|
|
260
|
-
});
|
|
261
|
-
};
|
|
262
246
|
/** Builds all tabs where non selected tabs have class of hidden */
|
|
263
247
|
|
|
264
248
|
|
|
@@ -266,10 +250,20 @@ const Tabs = ({
|
|
|
266
250
|
if (isInSidebar) return null;
|
|
267
251
|
|
|
268
252
|
if (!renderHiddenTabs) {
|
|
269
|
-
|
|
253
|
+
const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
|
|
254
|
+
return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
|
|
255
|
+
role: "tabpanel",
|
|
256
|
+
position,
|
|
257
|
+
isTabSelected: isTabSelected(tab.props.tabId),
|
|
258
|
+
key: `${tab.props.tabId}-tab`,
|
|
259
|
+
ariaLabelledby: `${tab.props.tabId}-tab`,
|
|
260
|
+
updateErrors,
|
|
261
|
+
updateWarnings,
|
|
262
|
+
updateInfos
|
|
263
|
+
});
|
|
270
264
|
}
|
|
271
265
|
|
|
272
|
-
|
|
266
|
+
return filteredChildren.map(child => {
|
|
273
267
|
return /*#__PURE__*/cloneElement(child, { ...child.props,
|
|
274
268
|
role: "tabpanel",
|
|
275
269
|
position,
|
|
@@ -281,7 +275,6 @@ const Tabs = ({
|
|
|
281
275
|
updateInfos
|
|
282
276
|
});
|
|
283
277
|
});
|
|
284
|
-
return tabs;
|
|
285
278
|
};
|
|
286
279
|
|
|
287
280
|
return /*#__PURE__*/React.createElement(StyledTabs, _extends({
|
|
@@ -38,6 +38,7 @@ exports.TabTitleContext = TabTitleContext;
|
|
|
38
38
|
const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
|
|
39
39
|
isTabSelected,
|
|
40
40
|
dataTabId,
|
|
41
|
+
"data-role": dataRole,
|
|
41
42
|
title,
|
|
42
43
|
position = "top",
|
|
43
44
|
error,
|
|
@@ -154,6 +155,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
154
155
|
"aria-selected": isTabSelected,
|
|
155
156
|
"data-element": "select-tab",
|
|
156
157
|
"data-tabid": dataTabId,
|
|
158
|
+
"data-role": dataRole,
|
|
157
159
|
role: "tab",
|
|
158
160
|
position: position,
|
|
159
161
|
isTabSelected: isTabSelected,
|
|
@@ -229,6 +231,9 @@ TabTitle.propTypes = {
|
|
|
229
231
|
isTabSelected: _propTypes.default.bool,
|
|
230
232
|
position: _propTypes.default.oneOf(["top", "left"]),
|
|
231
233
|
className: _propTypes.default.string,
|
|
234
|
+
|
|
235
|
+
/** Identifier used for testing purposes */
|
|
236
|
+
"data-role": _propTypes.default.string,
|
|
232
237
|
dataTabId: _propTypes.default.string,
|
|
233
238
|
id: _propTypes.default.string,
|
|
234
239
|
onClick: _propTypes.default.func,
|
|
@@ -43,6 +43,7 @@ const Tab = ({
|
|
|
43
43
|
updateInfos,
|
|
44
44
|
href,
|
|
45
45
|
title,
|
|
46
|
+
titleProps,
|
|
46
47
|
...rest
|
|
47
48
|
}) => {
|
|
48
49
|
const [tabErrors, setTabErrors] = (0, _react.useState)({});
|
|
@@ -145,7 +146,13 @@ Tab.propTypes = { ...paddingPropTypes,
|
|
|
145
146
|
titlePosition: _propTypes.default.oneOf(["before", "after"]),
|
|
146
147
|
|
|
147
148
|
/** Allows Tab to be a link */
|
|
148
|
-
href: _propTypes.default.string
|
|
149
|
+
href: _propTypes.default.string,
|
|
150
|
+
|
|
151
|
+
/** Additional props to be passed to the Tab's corresponding title */
|
|
152
|
+
titleProps: _propTypes.default.shape({
|
|
153
|
+
/** Identifier used for testing purposes */
|
|
154
|
+
"data-role": _propTypes.default.string
|
|
155
|
+
})
|
|
149
156
|
};
|
|
150
157
|
var _default = Tab;
|
|
151
158
|
exports.default = _default;
|
|
@@ -32,6 +32,11 @@ export interface TabProps extends PaddingProps {
|
|
|
32
32
|
href?: string;
|
|
33
33
|
/** Overrides default layout with a one defined in this prop */
|
|
34
34
|
customLayout?: React.ReactNode;
|
|
35
|
+
/** Additional props to be passed to the Tab's corresponding title. */
|
|
36
|
+
titleProps?: {
|
|
37
|
+
/** Identifier used for testing purposes */
|
|
38
|
+
"data-role"?: string;
|
|
39
|
+
};
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
export interface TabAllProps {
|
|
@@ -204,7 +204,8 @@ const Tabs = ({
|
|
|
204
204
|
warningMessage,
|
|
205
205
|
infoMessage,
|
|
206
206
|
href,
|
|
207
|
-
customLayout
|
|
207
|
+
customLayout,
|
|
208
|
+
titleProps
|
|
208
209
|
} = child.props;
|
|
209
210
|
const refId = `${tabId}-tab`;
|
|
210
211
|
const errors = tabsErrors[tabId];
|
|
@@ -235,7 +236,7 @@ const Tabs = ({
|
|
|
235
236
|
return summaryOfMessages.map(value => `• ${value}`).join("\n");
|
|
236
237
|
};
|
|
237
238
|
|
|
238
|
-
|
|
239
|
+
return /*#__PURE__*/_react.default.createElement(_tabTitle.default, _extends({}, titleProps, {
|
|
239
240
|
position: isInSidebar ? "left" : position,
|
|
240
241
|
className: child.props.className || "",
|
|
241
242
|
dataTabId: tabId,
|
|
@@ -264,9 +265,7 @@ const Tabs = ({
|
|
|
264
265
|
customLayout: customLayout,
|
|
265
266
|
isInSidebar: isInSidebar,
|
|
266
267
|
align: align
|
|
267
|
-
});
|
|
268
|
-
|
|
269
|
-
return tabTitle;
|
|
268
|
+
}));
|
|
270
269
|
});
|
|
271
270
|
return /*#__PURE__*/_react.default.createElement(_tabsHeader.default, {
|
|
272
271
|
align: align,
|
|
@@ -278,22 +277,6 @@ const Tabs = ({
|
|
|
278
277
|
isInSidebar: isInSidebar
|
|
279
278
|
}, tabTitles);
|
|
280
279
|
};
|
|
281
|
-
/** Builds the single currently selected tab */
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
const visibleTab = () => {
|
|
285
|
-
const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
|
|
286
|
-
return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
|
|
287
|
-
role: "tabpanel",
|
|
288
|
-
position,
|
|
289
|
-
isTabSelected: isTabSelected(tab.props.tabId),
|
|
290
|
-
key: `${tab.props.tabId}-tab`,
|
|
291
|
-
ariaLabelledby: `${tab.props.tabId}-tab`,
|
|
292
|
-
updateErrors,
|
|
293
|
-
updateWarnings,
|
|
294
|
-
updateInfos
|
|
295
|
-
});
|
|
296
|
-
};
|
|
297
280
|
/** Builds all tabs where non selected tabs have class of hidden */
|
|
298
281
|
|
|
299
282
|
|
|
@@ -301,10 +284,20 @@ const Tabs = ({
|
|
|
301
284
|
if (isInSidebar) return null;
|
|
302
285
|
|
|
303
286
|
if (!renderHiddenTabs) {
|
|
304
|
-
|
|
287
|
+
const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
|
|
288
|
+
return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
|
|
289
|
+
role: "tabpanel",
|
|
290
|
+
position,
|
|
291
|
+
isTabSelected: isTabSelected(tab.props.tabId),
|
|
292
|
+
key: `${tab.props.tabId}-tab`,
|
|
293
|
+
ariaLabelledby: `${tab.props.tabId}-tab`,
|
|
294
|
+
updateErrors,
|
|
295
|
+
updateWarnings,
|
|
296
|
+
updateInfos
|
|
297
|
+
});
|
|
305
298
|
}
|
|
306
299
|
|
|
307
|
-
|
|
300
|
+
return filteredChildren.map(child => {
|
|
308
301
|
return /*#__PURE__*/(0, _react.cloneElement)(child, { ...child.props,
|
|
309
302
|
role: "tabpanel",
|
|
310
303
|
position,
|
|
@@ -316,7 +309,6 @@ const Tabs = ({
|
|
|
316
309
|
updateInfos
|
|
317
310
|
});
|
|
318
311
|
});
|
|
319
|
-
return tabs;
|
|
320
312
|
};
|
|
321
313
|
|
|
322
314
|
return /*#__PURE__*/_react.default.createElement(_tabs.default, _extends({
|