carbon-react 116.1.2 → 116.1.3
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__/utils/helpers/events/events.d.ts +1 -1
- package/esm/components/date/date.component.js +9 -1
- package/esm/components/date/date.style.js +5 -2
- package/esm/components/detail/detail.component.d.ts +19 -0
- package/esm/components/detail/detail.component.js +176 -42
- package/esm/components/detail/detail.style.d.ts +10 -0
- package/esm/components/detail/index.d.ts +2 -1
- package/esm/components/drawer/drawer.component.d.ts +1 -1
- package/esm/components/icon/icon.component.js +1 -1
- package/esm/components/menu/index.d.ts +1 -0
- package/esm/components/tabs/__internal__/tab-title/index.d.ts +2 -1
- package/esm/components/tabs/__internal__/tab-title/index.js +1 -1
- package/esm/components/tabs/__internal__/tab-title/tab-title.component.d.ts +37 -3
- package/esm/components/tabs/__internal__/tab-title/tab-title.component.js +99 -97
- package/esm/components/tabs/__internal__/tab-title/tab-title.style.d.ts +18 -4
- package/esm/components/tabs/__internal__/tab-title/tab-title.style.js +14 -50
- package/esm/components/tabs/__internal__/tabs-header/index.d.ts +2 -1
- package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.d.ts +13 -0
- package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js +8 -8
- package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts +6 -6
- package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js +8 -27
- package/esm/components/tabs/index.d.ts +3 -2
- package/esm/components/tabs/tab/index.d.ts +2 -2
- package/esm/components/tabs/tab/tab.component.d.ts +53 -0
- package/esm/components/tabs/tab/tab.component.js +180 -61
- package/esm/components/tabs/tab/tab.style.d.ts +8 -1
- package/esm/components/tabs/tab/tab.style.js +1 -6
- package/esm/components/tabs/tabs.component.d.ts +49 -0
- package/esm/components/tabs/tabs.component.js +188 -70
- package/esm/components/tabs/tabs.style.d.ts +5 -1
- package/esm/components/tabs/tabs.style.js +2 -8
- package/esm/components/textbox/textbox.component.d.ts +1 -1
- package/lib/__internal__/utils/helpers/events/events.d.ts +1 -1
- package/lib/components/date/date.component.js +9 -1
- package/lib/components/date/date.style.js +5 -2
- package/lib/components/detail/detail.component.d.ts +19 -0
- package/lib/components/detail/detail.component.js +178 -47
- package/lib/components/detail/detail.style.d.ts +10 -0
- package/lib/components/detail/index.d.ts +2 -1
- package/lib/components/drawer/drawer.component.d.ts +1 -1
- package/lib/components/icon/icon.component.js +1 -1
- package/lib/components/menu/index.d.ts +1 -0
- package/lib/components/tabs/__internal__/tab-title/index.d.ts +2 -1
- package/lib/components/tabs/__internal__/tab-title/index.js +10 -2
- package/lib/components/tabs/__internal__/tab-title/tab-title.component.d.ts +37 -3
- package/lib/components/tabs/__internal__/tab-title/tab-title.component.js +99 -97
- package/lib/components/tabs/__internal__/tab-title/tab-title.style.d.ts +18 -4
- package/lib/components/tabs/__internal__/tab-title/tab-title.style.js +17 -53
- package/lib/components/tabs/__internal__/tabs-header/index.d.ts +2 -1
- package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.d.ts +13 -0
- package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js +8 -8
- package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts +6 -6
- package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js +9 -31
- package/lib/components/tabs/index.d.ts +3 -2
- package/lib/components/tabs/tab/index.d.ts +2 -2
- package/lib/components/tabs/tab/tab.component.d.ts +53 -0
- package/lib/components/tabs/tab/tab.component.js +181 -64
- package/lib/components/tabs/tab/tab.style.d.ts +8 -1
- package/lib/components/tabs/tab/tab.style.js +1 -7
- package/lib/components/tabs/tabs.component.d.ts +49 -0
- package/lib/components/tabs/tabs.component.js +188 -73
- package/lib/components/tabs/tabs.style.d.ts +5 -1
- package/lib/components/tabs/tabs.style.js +2 -9
- package/lib/components/textbox/textbox.component.d.ts +1 -1
- package/package.json +1 -1
- package/esm/components/detail/detail.d.ts +0 -16
- package/esm/components/tabs/__internal__/tab-title/tab-title.d.ts +0 -47
- package/esm/components/tabs/__internal__/tabs-header/tab-header.d.ts +0 -16
- package/esm/components/tabs/tab/tab.d.ts +0 -54
- package/esm/components/tabs/tabs.d.ts +0 -51
- package/lib/components/detail/detail.d.ts +0 -16
- package/lib/components/tabs/__internal__/tab-title/tab-title.d.ts +0 -47
- package/lib/components/tabs/__internal__/tabs-header/tab-header.d.ts +0 -16
- package/lib/components/tabs/tab/tab.d.ts +0 -54
- package/lib/components/tabs/tabs.d.ts +0 -51
|
@@ -1,4 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { TabTitleProps } from ".";
|
|
2
|
+
interface StyledTitleContentProps extends Pick<TabTitleProps, "align" | "borders" | "error" | "info" | "isTabSelected" | "noLeftBorder" | "noRightBorder" | "position" | "size" | "warning"> {
|
|
3
|
+
alternateStyling?: boolean;
|
|
4
|
+
hasCustomLayout?: boolean;
|
|
5
|
+
hasHref?: boolean;
|
|
6
|
+
hasSiblings?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const StyledTitleContent: import("styled-components").StyledComponent<"span", any, StyledTitleContentProps, never>;
|
|
9
|
+
declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps, never>;
|
|
10
|
+
declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps, never>;
|
|
11
|
+
interface StyledLayoutWrapperProps extends Pick<TabTitleProps, "titlePosition" | "position"> {
|
|
12
|
+
hasCustomLayout?: boolean;
|
|
13
|
+
hasCustomSibling?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, StyledLayoutWrapperProps, never>;
|
|
16
|
+
declare type StyledSelectedIndicatorProps = Pick<TabTitleProps, "position">;
|
|
17
|
+
declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, StyledSelectedIndicatorProps, never>;
|
|
18
|
+
export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, };
|
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledSelectedIndicator = exports.StyledLayoutWrapper = exports.StyledTitleContent = exports.
|
|
6
|
+
exports.StyledSelectedIndicator = exports.StyledLayoutWrapper = exports.StyledTitleContent = exports.StyledTabTitleLink = exports.StyledTabTitleButton = void 0;
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
10
|
var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
|
|
13
11
|
|
|
14
12
|
var _validationIcon = _interopRequireDefault(require("../../../../__internal__/validations/validation-icon.style"));
|
|
@@ -33,8 +31,8 @@ const StyledTitleContent = _styledComponents.default.span`
|
|
|
33
31
|
size,
|
|
34
32
|
isTabSelected,
|
|
35
33
|
hasSiblings,
|
|
36
|
-
borders,
|
|
37
|
-
position,
|
|
34
|
+
borders = false,
|
|
35
|
+
position = "top",
|
|
38
36
|
noLeftBorder,
|
|
39
37
|
noRightBorder,
|
|
40
38
|
hasHref,
|
|
@@ -224,7 +222,7 @@ const StyledTitleContent = _styledComponents.default.span`
|
|
|
224
222
|
`}
|
|
225
223
|
`;
|
|
226
224
|
exports.StyledTitleContent = StyledTitleContent;
|
|
227
|
-
const
|
|
225
|
+
const tabTitleStyles = (0, _styledComponents.css)`
|
|
228
226
|
background-color: transparent;
|
|
229
227
|
display: inline-block;
|
|
230
228
|
font-weight: bold;
|
|
@@ -243,8 +241,8 @@ const StyledTabTitle = _styledComponents.default.button`
|
|
|
243
241
|
|
|
244
242
|
${({
|
|
245
243
|
size,
|
|
246
|
-
position,
|
|
247
|
-
borders,
|
|
244
|
+
position = "top",
|
|
245
|
+
borders = false,
|
|
248
246
|
noRightBorder,
|
|
249
247
|
noLeftBorder,
|
|
250
248
|
isTabSelected,
|
|
@@ -391,11 +389,18 @@ const StyledTabTitle = _styledComponents.default.button`
|
|
|
391
389
|
`}
|
|
392
390
|
`}
|
|
393
391
|
`;
|
|
394
|
-
|
|
392
|
+
const StyledTabTitleButton = _styledComponents.default.button`
|
|
393
|
+
${tabTitleStyles}
|
|
394
|
+
`;
|
|
395
|
+
exports.StyledTabTitleButton = StyledTabTitleButton;
|
|
396
|
+
const StyledTabTitleLink = _styledComponents.default.a`
|
|
397
|
+
${tabTitleStyles}
|
|
398
|
+
`;
|
|
399
|
+
exports.StyledTabTitleLink = StyledTabTitleLink;
|
|
395
400
|
const StyledLayoutWrapper = _styledComponents.default.div`
|
|
396
401
|
${({
|
|
397
402
|
hasCustomLayout,
|
|
398
|
-
titlePosition,
|
|
403
|
+
titlePosition = "before",
|
|
399
404
|
hasCustomSibling,
|
|
400
405
|
position
|
|
401
406
|
}) => (0, _styledComponents.css)`
|
|
@@ -437,7 +442,7 @@ const StyledSelectedIndicator = _styledComponents.default.div`
|
|
|
437
442
|
z-index: 1;
|
|
438
443
|
|
|
439
444
|
${({
|
|
440
|
-
position
|
|
445
|
+
position = "top"
|
|
441
446
|
}) => (0, _styledComponents.css)`
|
|
442
447
|
${position === "top" && (0, _styledComponents.css)`
|
|
443
448
|
bottom: 0px;
|
|
@@ -458,45 +463,4 @@ const StyledSelectedIndicator = _styledComponents.default.div`
|
|
|
458
463
|
`}
|
|
459
464
|
`}
|
|
460
465
|
`;
|
|
461
|
-
exports.StyledSelectedIndicator = StyledSelectedIndicator;
|
|
462
|
-
StyledTabTitle.propTypes = {
|
|
463
|
-
position: _propTypes.default.oneOf(["top", "left"]),
|
|
464
|
-
size: _propTypes.default.oneOf(["default", "large"]),
|
|
465
|
-
borders: _propTypes.default.bool
|
|
466
|
-
};
|
|
467
|
-
StyledTabTitle.defaultProps = {
|
|
468
|
-
position: "top",
|
|
469
|
-
size: "default",
|
|
470
|
-
borders: false
|
|
471
|
-
};
|
|
472
|
-
StyledLayoutWrapper.propTypes = {
|
|
473
|
-
hasCustomLayout: _propTypes.default.bool,
|
|
474
|
-
titlePosition: _propTypes.default.oneOf(["before", "after"])
|
|
475
|
-
};
|
|
476
|
-
StyledLayoutWrapper.defaultProps = {
|
|
477
|
-
titlePosition: "before"
|
|
478
|
-
};
|
|
479
|
-
StyledTitleContent.propTypes = {
|
|
480
|
-
position: _propTypes.default.oneOf(["top", "left"]),
|
|
481
|
-
size: _propTypes.default.oneOf(["default", "large"]),
|
|
482
|
-
borders: _propTypes.default.bool,
|
|
483
|
-
error: _propTypes.default.bool,
|
|
484
|
-
warning: _propTypes.default.bool,
|
|
485
|
-
info: _propTypes.default.bool,
|
|
486
|
-
noLeftBorder: _propTypes.default.bool,
|
|
487
|
-
noRightBorder: _propTypes.default.bool,
|
|
488
|
-
hasSiblings: _propTypes.default.bool
|
|
489
|
-
};
|
|
490
|
-
StyledTitleContent.defaultProps = {
|
|
491
|
-
position: "top",
|
|
492
|
-
size: "default",
|
|
493
|
-
borders: false
|
|
494
|
-
};
|
|
495
|
-
StyledSelectedIndicator.propTypes = {
|
|
496
|
-
position: _propTypes.default.oneOf(["top", "left"]),
|
|
497
|
-
size: _propTypes.default.oneOf(["default", "large"])
|
|
498
|
-
};
|
|
499
|
-
StyledSelectedIndicator.defaultProps = {
|
|
500
|
-
position: "top",
|
|
501
|
-
size: "default"
|
|
502
|
-
};
|
|
466
|
+
exports.StyledSelectedIndicator = StyledSelectedIndicator;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default } from "./
|
|
1
|
+
export { default } from "./tabs-header.component";
|
|
2
|
+
export type { TabHeaderProps } from "./tabs-header.component";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface TabHeaderProps {
|
|
3
|
+
role?: string;
|
|
4
|
+
position?: "top" | "left";
|
|
5
|
+
extendedLine?: boolean;
|
|
6
|
+
noRightBorder?: boolean;
|
|
7
|
+
alternateStyling?: boolean;
|
|
8
|
+
isInSidebar?: boolean;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
align?: "left" | "right";
|
|
11
|
+
}
|
|
12
|
+
declare const TabsHeader: ({ align, children, position, role, extendedLine, alternateStyling, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
|
|
13
|
+
export default TabsHeader;
|
|
@@ -38,14 +38,14 @@ const TabsHeader = ({
|
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
TabsHeader.propTypes = {
|
|
41
|
-
align: _propTypes.default.oneOf(["left", "right"]),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
"align": _propTypes.default.oneOf(["left", "right"]),
|
|
42
|
+
"alternateStyling": _propTypes.default.bool,
|
|
43
|
+
"children": _propTypes.default.node,
|
|
44
|
+
"extendedLine": _propTypes.default.bool,
|
|
45
|
+
"isInSidebar": _propTypes.default.bool,
|
|
46
|
+
"noRightBorder": _propTypes.default.bool,
|
|
47
|
+
"position": _propTypes.default.oneOf(["left", "top"]),
|
|
48
|
+
"role": _propTypes.default.string
|
|
49
49
|
};
|
|
50
50
|
var _default = TabsHeader;
|
|
51
51
|
exports.default = _default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { TabHeaderProps } from "./tabs-header.component";
|
|
2
|
+
declare type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
|
|
3
|
+
declare const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderWrapperProps, never>;
|
|
4
|
+
export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "alternateStyling" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
|
|
5
|
+
declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
|
|
6
|
+
export { StyledTabsHeaderWrapper, StyledTabsHeaderList };
|
|
@@ -7,10 +7,6 @@ exports.StyledTabsHeaderList = exports.StyledTabsHeaderWrapper = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
15
11
|
|
|
16
12
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -52,7 +48,7 @@ const StyledTabsHeaderList = _styledComponents.default.div`
|
|
|
52
48
|
display: flex;
|
|
53
49
|
box-shadow: inset 0px ${computeLineWidth} 0px 0px var(--colorsActionMinor100);
|
|
54
50
|
${({
|
|
55
|
-
extendedLine
|
|
51
|
+
extendedLine = true
|
|
56
52
|
}) => !extendedLine && (0, _styledComponents.css)`
|
|
57
53
|
width: fit-content;
|
|
58
54
|
`}
|
|
@@ -62,15 +58,16 @@ const StyledTabsHeaderList = _styledComponents.default.div`
|
|
|
62
58
|
padding: 0;
|
|
63
59
|
|
|
64
60
|
${({
|
|
65
|
-
align
|
|
61
|
+
align = "left"
|
|
66
62
|
}) => align === "right" && (0, _styledComponents.css)`
|
|
67
63
|
justify-content: flex-end;
|
|
68
64
|
text-align: right;
|
|
69
65
|
`}
|
|
70
66
|
|
|
71
67
|
${({
|
|
72
|
-
position,
|
|
73
|
-
noRightBorder
|
|
68
|
+
position = "top",
|
|
69
|
+
noRightBorder,
|
|
70
|
+
align = "left"
|
|
74
71
|
}) => position === "left" && (0, _styledComponents.css)`
|
|
75
72
|
flex-direction: column;
|
|
76
73
|
box-shadow: none;
|
|
@@ -79,28 +76,9 @@ const StyledTabsHeaderList = _styledComponents.default.div`
|
|
|
79
76
|
box-shadow: none;
|
|
80
77
|
`}
|
|
81
78
|
|
|
82
|
-
${(
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
justify-content: flex-start;
|
|
86
|
-
`}
|
|
79
|
+
${align === "right" && (0, _styledComponents.css)`
|
|
80
|
+
justify-content: flex-start;
|
|
81
|
+
`}
|
|
87
82
|
`}
|
|
88
83
|
`;
|
|
89
|
-
exports.StyledTabsHeaderList = StyledTabsHeaderList;
|
|
90
|
-
StyledTabsHeaderWrapper.defaultProps = {
|
|
91
|
-
position: "top"
|
|
92
|
-
};
|
|
93
|
-
StyledTabsHeaderWrapper.propTypes = {
|
|
94
|
-
position: _propTypes.default.oneOf(["top", "left"]),
|
|
95
|
-
isInSidebar: _propTypes.default.bool
|
|
96
|
-
};
|
|
97
|
-
StyledTabsHeaderList.defaultProps = {
|
|
98
|
-
align: "left",
|
|
99
|
-
position: "top",
|
|
100
|
-
extendedLine: true
|
|
101
|
-
};
|
|
102
|
-
StyledTabsHeaderList.propTypes = {
|
|
103
|
-
align: _propTypes.default.oneOf(["left", "right"]),
|
|
104
|
-
position: _propTypes.default.oneOf(["top", "left"]),
|
|
105
|
-
isInSidebar: _propTypes.default.bool
|
|
106
|
-
};
|
|
84
|
+
exports.StyledTabsHeaderList = StyledTabsHeaderList;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { Tabs, Tab } from "./tabs";
|
|
2
|
-
export
|
|
1
|
+
export { Tabs, Tab } from "./tabs.component";
|
|
2
|
+
export type { TabsProps } from "./tabs.component";
|
|
3
|
+
export type { TabProps } from "./tab";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./tab";
|
|
2
|
-
export
|
|
1
|
+
export { default, TabContext } from "./tab.component";
|
|
2
|
+
export type { TabProps, TabContextProps } from "./tab.component";
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PaddingProps } from "styled-system";
|
|
3
|
+
export interface TabContextProps {
|
|
4
|
+
setError?: (childId: string, error?: boolean | string) => void;
|
|
5
|
+
setWarning?: (childId: string, warning?: boolean | string) => void;
|
|
6
|
+
setInfo?: (childId: string, info?: boolean | string) => void;
|
|
7
|
+
}
|
|
8
|
+
export interface TabProps extends PaddingProps {
|
|
9
|
+
title?: string;
|
|
10
|
+
/** A unique ID to identify this specific tab. */
|
|
11
|
+
tabId: string;
|
|
12
|
+
/** @ignore @private */
|
|
13
|
+
className?: string;
|
|
14
|
+
/** The child elements of Tab component. */
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
/** @ignore @private Boolean indicating selected state of Tab. */
|
|
17
|
+
isTabSelected?: boolean;
|
|
18
|
+
/** The position of the Tab. */
|
|
19
|
+
position?: "top" | "left";
|
|
20
|
+
/** Message displayed when Tab has error */
|
|
21
|
+
errorMessage?: string;
|
|
22
|
+
/** Message displayed when Tab has warning */
|
|
23
|
+
warningMessage?: string;
|
|
24
|
+
/** Message displayed when Tab has warning */
|
|
25
|
+
infoMessage?: string;
|
|
26
|
+
/** Additional content to display with title */
|
|
27
|
+
siblings?: React.ReactNode;
|
|
28
|
+
/** Position title before or after siblings */
|
|
29
|
+
titlePosition?: "before" | "after";
|
|
30
|
+
/** Allows Tab to be a link */
|
|
31
|
+
href?: string;
|
|
32
|
+
/** Overrides default layout with a one defined in this prop */
|
|
33
|
+
customLayout?: React.ReactNode;
|
|
34
|
+
/** Additional props to be passed to the Tab's corresponding title. */
|
|
35
|
+
titleProps?: {
|
|
36
|
+
/** Identifier used for testing purposes */
|
|
37
|
+
"data-role"?: string;
|
|
38
|
+
};
|
|
39
|
+
/** @private @ignore */
|
|
40
|
+
role?: string;
|
|
41
|
+
/** @private @ignore */
|
|
42
|
+
ariaLabelledby?: string;
|
|
43
|
+
/** @private @ignore */
|
|
44
|
+
updateErrors?: (id: string, errors: Record<string, string | boolean>) => void;
|
|
45
|
+
/** @private @ignore */
|
|
46
|
+
updateWarnings?: (id: string, warnings: Record<string, string | boolean>) => void;
|
|
47
|
+
/** @private @ignore */
|
|
48
|
+
updateInfos?: (id: string, infos: Record<string, string | boolean>) => void;
|
|
49
|
+
}
|
|
50
|
+
declare const TabContext: React.Context<TabContextProps>;
|
|
51
|
+
export declare const Tab: ({ ariaLabelledby, className, children, isTabSelected, position, role, tabId, updateErrors, updateWarnings, updateInfos, href, title, titleProps, ...rest }: TabProps) => JSX.Element;
|
|
52
|
+
export { TabContext };
|
|
53
|
+
export default Tab;
|
|
@@ -3,20 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.TabContext = void 0;
|
|
6
|
+
exports.default = exports.TabContext = exports.Tab = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
|
|
13
|
-
|
|
14
12
|
var _tab = _interopRequireDefault(require("./tab.style"));
|
|
15
13
|
|
|
16
14
|
var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
|
|
17
15
|
|
|
18
|
-
var _utils = require("../../../style/utils");
|
|
19
|
-
|
|
20
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
17
|
|
|
22
18
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
@@ -28,7 +24,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
28
24
|
const TabContext = /*#__PURE__*/_react.default.createContext({});
|
|
29
25
|
|
|
30
26
|
exports.TabContext = TabContext;
|
|
31
|
-
const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
|
|
32
27
|
|
|
33
28
|
const Tab = ({
|
|
34
29
|
ariaLabelledby,
|
|
@@ -42,7 +37,11 @@ const Tab = ({
|
|
|
42
37
|
updateWarnings,
|
|
43
38
|
updateInfos,
|
|
44
39
|
href,
|
|
40
|
+
// title is destructured purely to NOT spread it as part of rest to the underlying HTML element.
|
|
41
|
+
// Both this and titleProps are used as part of child.props inside Tabs component
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
45
43
|
title,
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
46
45
|
titleProps,
|
|
47
46
|
...rest
|
|
48
47
|
}) => {
|
|
@@ -94,65 +93,183 @@ const Tab = ({
|
|
|
94
93
|
}, (0, _tags.default)("tab", rest), rest), !href && children));
|
|
95
94
|
};
|
|
96
95
|
|
|
97
|
-
Tab
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
96
|
+
exports.Tab = Tab;
|
|
97
|
+
Tab.propTypes = {
|
|
98
|
+
"ariaLabelledby": _propTypes.default.string,
|
|
99
|
+
"children": _propTypes.default.node,
|
|
100
|
+
"className": _propTypes.default.string,
|
|
101
|
+
"customLayout": _propTypes.default.node,
|
|
102
|
+
"errorMessage": _propTypes.default.string,
|
|
103
|
+
"href": _propTypes.default.string,
|
|
104
|
+
"infoMessage": _propTypes.default.string,
|
|
105
|
+
"isTabSelected": _propTypes.default.bool,
|
|
106
|
+
"p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
107
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
108
|
+
"description": _propTypes.default.string,
|
|
109
|
+
"toString": _propTypes.default.func.isRequired,
|
|
110
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
111
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
112
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
113
|
+
"description": _propTypes.default.string,
|
|
114
|
+
"toString": _propTypes.default.func.isRequired,
|
|
115
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
116
|
+
}), _propTypes.default.string]),
|
|
117
|
+
"padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
118
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
119
|
+
"description": _propTypes.default.string,
|
|
120
|
+
"toString": _propTypes.default.func.isRequired,
|
|
121
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
122
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
123
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
124
|
+
"description": _propTypes.default.string,
|
|
125
|
+
"toString": _propTypes.default.func.isRequired,
|
|
126
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
127
|
+
}), _propTypes.default.string]),
|
|
128
|
+
"paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
129
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
130
|
+
"description": _propTypes.default.string,
|
|
131
|
+
"toString": _propTypes.default.func.isRequired,
|
|
132
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
133
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
134
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
135
|
+
"description": _propTypes.default.string,
|
|
136
|
+
"toString": _propTypes.default.func.isRequired,
|
|
137
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
138
|
+
}), _propTypes.default.string]),
|
|
139
|
+
"paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
140
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
141
|
+
"description": _propTypes.default.string,
|
|
142
|
+
"toString": _propTypes.default.func.isRequired,
|
|
143
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
144
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
145
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
146
|
+
"description": _propTypes.default.string,
|
|
147
|
+
"toString": _propTypes.default.func.isRequired,
|
|
148
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
149
|
+
}), _propTypes.default.string]),
|
|
150
|
+
"paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
151
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
152
|
+
"description": _propTypes.default.string,
|
|
153
|
+
"toString": _propTypes.default.func.isRequired,
|
|
154
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
155
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
156
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
157
|
+
"description": _propTypes.default.string,
|
|
158
|
+
"toString": _propTypes.default.func.isRequired,
|
|
159
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
160
|
+
}), _propTypes.default.string]),
|
|
161
|
+
"paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
162
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
163
|
+
"description": _propTypes.default.string,
|
|
164
|
+
"toString": _propTypes.default.func.isRequired,
|
|
165
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
166
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
167
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
168
|
+
"description": _propTypes.default.string,
|
|
169
|
+
"toString": _propTypes.default.func.isRequired,
|
|
170
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
171
|
+
}), _propTypes.default.string]),
|
|
172
|
+
"paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
173
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
174
|
+
"description": _propTypes.default.string,
|
|
175
|
+
"toString": _propTypes.default.func.isRequired,
|
|
176
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
177
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
178
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
179
|
+
"description": _propTypes.default.string,
|
|
180
|
+
"toString": _propTypes.default.func.isRequired,
|
|
181
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
182
|
+
}), _propTypes.default.string]),
|
|
183
|
+
"paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
184
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
185
|
+
"description": _propTypes.default.string,
|
|
186
|
+
"toString": _propTypes.default.func.isRequired,
|
|
187
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
188
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
189
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
190
|
+
"description": _propTypes.default.string,
|
|
191
|
+
"toString": _propTypes.default.func.isRequired,
|
|
192
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
193
|
+
}), _propTypes.default.string]),
|
|
194
|
+
"pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
195
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
196
|
+
"description": _propTypes.default.string,
|
|
197
|
+
"toString": _propTypes.default.func.isRequired,
|
|
198
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
199
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
200
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
201
|
+
"description": _propTypes.default.string,
|
|
202
|
+
"toString": _propTypes.default.func.isRequired,
|
|
203
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
204
|
+
}), _propTypes.default.string]),
|
|
205
|
+
"pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
206
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
207
|
+
"description": _propTypes.default.string,
|
|
208
|
+
"toString": _propTypes.default.func.isRequired,
|
|
209
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
210
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
211
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
212
|
+
"description": _propTypes.default.string,
|
|
213
|
+
"toString": _propTypes.default.func.isRequired,
|
|
214
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
215
|
+
}), _propTypes.default.string]),
|
|
216
|
+
"position": _propTypes.default.oneOf(["left", "top"]),
|
|
217
|
+
"pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
218
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
219
|
+
"description": _propTypes.default.string,
|
|
220
|
+
"toString": _propTypes.default.func.isRequired,
|
|
221
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
222
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
223
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
224
|
+
"description": _propTypes.default.string,
|
|
225
|
+
"toString": _propTypes.default.func.isRequired,
|
|
226
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
227
|
+
}), _propTypes.default.string]),
|
|
228
|
+
"pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
229
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
230
|
+
"description": _propTypes.default.string,
|
|
231
|
+
"toString": _propTypes.default.func.isRequired,
|
|
232
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
233
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
234
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
235
|
+
"description": _propTypes.default.string,
|
|
236
|
+
"toString": _propTypes.default.func.isRequired,
|
|
237
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
238
|
+
}), _propTypes.default.string]),
|
|
239
|
+
"px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
240
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
241
|
+
"description": _propTypes.default.string,
|
|
242
|
+
"toString": _propTypes.default.func.isRequired,
|
|
243
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
244
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
245
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
246
|
+
"description": _propTypes.default.string,
|
|
247
|
+
"toString": _propTypes.default.func.isRequired,
|
|
248
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
249
|
+
}), _propTypes.default.string]),
|
|
250
|
+
"py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
251
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
252
|
+
"description": _propTypes.default.string,
|
|
253
|
+
"toString": _propTypes.default.func.isRequired,
|
|
254
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
255
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
256
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
257
|
+
"description": _propTypes.default.string,
|
|
258
|
+
"toString": _propTypes.default.func.isRequired,
|
|
259
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
260
|
+
}), _propTypes.default.string]),
|
|
261
|
+
"role": _propTypes.default.string,
|
|
262
|
+
"siblings": _propTypes.default.node,
|
|
263
|
+
"tabId": _propTypes.default.string.isRequired,
|
|
264
|
+
"title": _propTypes.default.string,
|
|
265
|
+
"titlePosition": _propTypes.default.oneOf(["after", "before"]),
|
|
266
|
+
"titleProps": _propTypes.default.shape({
|
|
154
267
|
"data-role": _propTypes.default.string
|
|
155
|
-
})
|
|
268
|
+
}),
|
|
269
|
+
"updateErrors": _propTypes.default.func,
|
|
270
|
+
"updateInfos": _propTypes.default.func,
|
|
271
|
+
"updateWarnings": _propTypes.default.func,
|
|
272
|
+
"warningMessage": _propTypes.default.string
|
|
156
273
|
};
|
|
157
274
|
var _default = Tab;
|
|
158
275
|
exports.default = _default;
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
+
import { ThemeObject } from "../../../style/themes/base";
|
|
2
|
+
import { TabProps } from ".";
|
|
3
|
+
export declare type StyledTabProps = Pick<TabProps, "position" | "isTabSelected"> & {
|
|
4
|
+
theme?: ThemeObject;
|
|
5
|
+
};
|
|
6
|
+
declare const StyledTab: import("styled-components").StyledComponent<"div", any, Pick<TabProps, "position" | "isTabSelected"> & {
|
|
7
|
+
theme?: ThemeObject | undefined;
|
|
8
|
+
}, never>;
|
|
1
9
|
export default StyledTab;
|
|
2
|
-
declare const StyledTab: import("styled-components").StyledComponent<"div", any, {}, never>;
|