carbon-react 101.2.0 → 101.3.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.
|
@@ -39,6 +39,7 @@ const FlatTable = ({
|
|
|
39
39
|
hasMaxHeight = false,
|
|
40
40
|
ariaDescribedby,
|
|
41
41
|
minHeight,
|
|
42
|
+
overflowX,
|
|
42
43
|
...rest
|
|
43
44
|
}) => {
|
|
44
45
|
const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
|
|
@@ -57,16 +58,18 @@ const FlatTable = ({
|
|
|
57
58
|
}) => /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
|
|
58
59
|
isInSidebar: isInSidebar,
|
|
59
60
|
hasStickyHead: hasStickyHead,
|
|
60
|
-
colorTheme: colorTheme
|
|
61
|
-
}, rest, {
|
|
61
|
+
colorTheme: colorTheme,
|
|
62
62
|
minHeight: minHeight,
|
|
63
63
|
overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
|
|
64
64
|
height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
|
|
65
65
|
maxHeight: hasMaxHeight ? "100%" : undefined,
|
|
66
66
|
display: "flex",
|
|
67
67
|
flexDirection: "column",
|
|
68
|
-
justifyContent: hasStickyFooter || height ? "space-between" : undefined
|
|
69
|
-
|
|
68
|
+
justifyContent: hasStickyFooter || height ? "space-between" : undefined,
|
|
69
|
+
tabIndex: "0",
|
|
70
|
+
role: "region",
|
|
71
|
+
overflowX: overflowX
|
|
72
|
+
}, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
|
|
70
73
|
"data-component": "flat-table"
|
|
71
74
|
}, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
|
|
72
75
|
value: {
|
|
@@ -114,7 +117,10 @@ FlatTable.propTypes = { ...marginPropTypes,
|
|
|
114
117
|
size: _propTypes.default.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
|
|
115
118
|
|
|
116
119
|
/** Applies max-height of 100% to FlatTable if true */
|
|
117
|
-
hasMaxHeight: _propTypes.default.bool
|
|
120
|
+
hasMaxHeight: _propTypes.default.bool,
|
|
121
|
+
|
|
122
|
+
/** Set the overflow X of the table wrapper. Any valid CSS string */
|
|
123
|
+
overflowX: _propTypes.default.string
|
|
118
124
|
};
|
|
119
125
|
FlatTable.defaultProps = {
|
|
120
126
|
colorTheme: "dark",
|
|
@@ -107,6 +107,18 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
|
|
|
107
107
|
}) => (0, _styledComponents.css)`
|
|
108
108
|
box-sizing: border-box;
|
|
109
109
|
|
|
110
|
+
:focus {
|
|
111
|
+
outline: 2px solid ${theme.colors.focus};
|
|
112
|
+
|
|
113
|
+
:not(:focus-visible) {
|
|
114
|
+
outline: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
:focus-visible {
|
|
118
|
+
outline: 2px solid ${theme.colors.focus};
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
110
122
|
${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px ${theme.table.secondary}`};
|
|
111
123
|
`}
|
|
112
124
|
|