carbon-react 125.2.0 → 125.2.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.
Files changed (7) hide show
  1. package/esm/components/flat-table/flat-table.component.js +14 -4
  2. package/esm/components/flat-table/flat-table.style.d.ts +1 -0
  3. package/esm/components/flat-table/flat-table.style.js +14 -23
  4. package/lib/components/flat-table/flat-table.component.js +14 -4
  5. package/lib/components/flat-table/flat-table.style.d.ts +1 -0
  6. package/lib/components/flat-table/flat-table.style.js +14 -23
  7. package/package.json +1 -1
package/esm/components/flat-table/flat-table.component.js CHANGED
@@ -27,10 +27,12 @@ export const FlatTable = ({
27
27
  }) => {
28
28
  const wrapperRef = useRef(null);
29
29
  const tableRef = useRef(null);
30
+ const container = useRef(null);
30
31
  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
31
32
  const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
32
33
  const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
33
34
  const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
35
+ const [focused, setFocused] = useState(false);
34
36
  const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
35
37
  const tableStylingProps = {
36
38
  caption,
@@ -92,12 +94,12 @@ export const FlatTable = ({
92
94
  });
93
95
  const handleKeyDown = ev => {
94
96
  const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
97
+ const focusableElementsArray = Array.from(focusableElements || /* istanbul ignore next */[]);
95
98
 
96
99
  /* istanbul ignore if */
97
- if (!focusableElements) {
100
+ if (!focusableElementsArray.length) {
98
101
  return;
99
102
  }
100
- const focusableElementsArray = Array.from(focusableElements);
101
103
  const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
102
104
  if (Events.isDownKey(ev)) {
103
105
  ev.preventDefault();
@@ -144,7 +146,6 @@ export const FlatTable = ({
144
146
  display: "flex",
145
147
  flexDirection: "column",
146
148
  justifyContent: hasStickyFooter || height ? "space-between" : undefined,
147
- tabIndex: 0,
148
149
  role: "region",
149
150
  overflowX: width ? "hidden" : undefined,
150
151
  width: width,
@@ -154,8 +155,17 @@ export const FlatTable = ({
154
155
  footer: !!footer,
155
156
  firstColRowSpanIndex: firstColRowSpanIndex,
156
157
  lastColRowSpanIndex: lastColRowSpanIndex,
157
- onKeyDown: handleKeyDown
158
+ onKeyDown: handleKeyDown,
159
+ isFocused: focused
158
160
  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
161
+ ref: container,
162
+ onFocus: () => {
163
+ if (container.current === document.activeElement) {
164
+ setFocused(true);
165
+ }
166
+ },
167
+ onBlur: () => setFocused(false),
168
+ tabIndex: 0,
159
169
  overflowX: overflowX,
160
170
  width: width
161
171
  }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
package/esm/components/flat-table/flat-table.style.d.ts CHANGED
@@ -9,6 +9,7 @@ interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFoo
9
9
  hasVerticalScrollbar: boolean;
10
10
  lastColRowSpanIndex: number;
11
11
  firstColRowSpanIndex: number;
12
+ isFocused: boolean;
12
13
  }
13
14
  declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
14
15
  declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;
package/esm/components/flat-table/flat-table.style.js CHANGED
@@ -25,6 +25,10 @@ const StyledTableContainer = styled.div`
25
25
 
26
26
  ${overflowX && `overflow-x: ${overflowX};`}
27
27
  `}
28
+
29
+ :focus {
30
+ outline: none;
31
+ }
28
32
  `;
29
33
  const StyledFlatTable = styled.table`
30
34
  border-collapse: separate;
@@ -106,35 +110,22 @@ const StyledFlatTableWrapper = styled(StyledBox)`
106
110
 
107
111
  ${({
108
112
  isInSidebar,
109
- theme
113
+ theme,
114
+ isFocused
110
115
  }) => css`
111
116
  box-sizing: border-box;
112
117
 
113
- :focus {
114
- /* istanbul ignore next */
115
- ${theme.focusRedesignOptOut && /* istanbul ignore next */
118
+ /* istanbul ignore next */
119
+ ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
116
120
  css`
117
- ${oldFocusStyling}
121
+ ${oldFocusStyling}
122
+ `}
118
123
 
119
- :not(:focus-visible) {
120
- outline: none;
121
- }
122
-
123
- :focus-visible {
124
- ${oldFocusStyling}
125
- }
126
- `}
127
-
128
- ${!theme.focusRedesignOptOut && css`
129
- ${addFocusStyling()}
130
- :not(:focus-visible) {
131
- outline: none;
132
- box-shadow: none;
133
- }
134
- `}
135
- }
124
+ ${!theme.focusRedesignOptOut && isFocused && css`
125
+ ${addFocusStyling()}
126
+ `}
136
127
 
137
- ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
128
+ ${isInSidebar ? "min-width: fit-content;" : ""}
138
129
  `}
139
130
 
140
131
  ${({
package/lib/components/flat-table/flat-table.component.js CHANGED
@@ -36,10 +36,12 @@ const FlatTable = ({
36
36
  }) => {
37
37
  const wrapperRef = (0, _react.useRef)(null);
38
38
  const tableRef = (0, _react.useRef)(null);
39
+ const container = (0, _react.useRef)(null);
39
40
  const [hasVerticalScrollbar, setHasVerticalScrollbar] = (0, _react.useState)(false);
40
41
  const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
41
42
  const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
42
43
  const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
44
+ const [focused, setFocused] = (0, _react.useState)(false);
43
45
  const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
44
46
  const tableStylingProps = {
45
47
  caption,
@@ -101,12 +103,12 @@ const FlatTable = ({
101
103
  });
102
104
  const handleKeyDown = ev => {
103
105
  const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
106
+ const focusableElementsArray = Array.from(focusableElements || /* istanbul ignore next */[]);
104
107
 
105
108
  /* istanbul ignore if */
106
- if (!focusableElements) {
109
+ if (!focusableElementsArray.length) {
107
110
  return;
108
111
  }
109
- const focusableElementsArray = Array.from(focusableElements);
110
112
  const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
111
113
  if (_events.default.isDownKey(ev)) {
112
114
  ev.preventDefault();
@@ -153,7 +155,6 @@ const FlatTable = ({
153
155
  display: "flex",
154
156
  flexDirection: "column",
155
157
  justifyContent: hasStickyFooter || height ? "space-between" : undefined,
156
- tabIndex: 0,
157
158
  role: "region",
158
159
  overflowX: width ? "hidden" : undefined,
159
160
  width: width,
@@ -163,8 +164,17 @@ const FlatTable = ({
163
164
  footer: !!footer,
164
165
  firstColRowSpanIndex: firstColRowSpanIndex,
165
166
  lastColRowSpanIndex: lastColRowSpanIndex,
166
- onKeyDown: handleKeyDown
167
+ onKeyDown: handleKeyDown,
168
+ isFocused: focused
167
169
  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
170
+ ref: container,
171
+ onFocus: () => {
172
+ if (container.current === document.activeElement) {
173
+ setFocused(true);
174
+ }
175
+ },
176
+ onBlur: () => setFocused(false),
177
+ tabIndex: 0,
168
178
  overflowX: overflowX,
169
179
  width: width
170
180
  }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
package/lib/components/flat-table/flat-table.style.d.ts CHANGED
@@ -9,6 +9,7 @@ interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFoo
9
9
  hasVerticalScrollbar: boolean;
10
10
  lastColRowSpanIndex: number;
11
11
  firstColRowSpanIndex: number;
12
+ isFocused: boolean;
12
13
  }
13
14
  declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
14
15
  declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;
package/lib/components/flat-table/flat-table.style.js CHANGED
@@ -34,6 +34,10 @@ const StyledTableContainer = exports.StyledTableContainer = _styledComponents.de
34
34
 
35
35
  ${overflowX && `overflow-x: ${overflowX};`}
36
36
  `}
37
+
38
+ :focus {
39
+ outline: none;
40
+ }
37
41
  `;
38
42
  const StyledFlatTable = exports.StyledFlatTable = _styledComponents.default.table`
39
43
  border-collapse: separate;
@@ -115,35 +119,22 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
115
119
 
116
120
  ${({
117
121
  isInSidebar,
118
- theme
122
+ theme,
123
+ isFocused
119
124
  }) => (0, _styledComponents.css)`
120
125
  box-sizing: border-box;
121
126
 
122
- :focus {
123
- /* istanbul ignore next */
124
- ${theme.focusRedesignOptOut && /* istanbul ignore next */
127
+ /* istanbul ignore next */
128
+ ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
125
129
  (0, _styledComponents.css)`
126
- ${oldFocusStyling}
130
+ ${oldFocusStyling}
131
+ `}
127
132
 
128
- :not(:focus-visible) {
129
- outline: none;
130
- }
131
-
132
- :focus-visible {
133
- ${oldFocusStyling}
134
- }
135
- `}
136
-
137
- ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
138
- ${(0, _addFocusStyling.default)()}
139
- :not(:focus-visible) {
140
- outline: none;
141
- box-shadow: none;
142
- }
143
- `}
144
- }
133
+ ${!theme.focusRedesignOptOut && isFocused && (0, _styledComponents.css)`
134
+ ${(0, _addFocusStyling.default)()}
135
+ `}
145
136
 
146
- ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
137
+ ${isInSidebar ? "min-width: fit-content;" : ""}
147
138
  `}
148
139
 
149
140
  ${({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "125.2.0",
3
+ "version": "125.2.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",