carbon-react 109.3.2 → 109.3.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.
Files changed (5) hide show
  1. package/esm/components/select/select-list/select-list.component.js +9 -1
  2. package/esm/components/select/select-list/select-list.style.js +8 -1
  3. package/lib/components/select/select-list/select-list.component.js +9 -1
  4. package/lib/components/select/select-list/select-list.style.js +8 -1
  5. package/package.json +2 -2
package/esm/components/select/select-list/select-list.component.js CHANGED
@@ -51,6 +51,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
51
51
  const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
52
52
  const [listHeight, setListHeight] = useState(0);
53
53
  const [listWidth, setListWidth] = useState(null);
54
+ const [scrollbarWidth, setScrollbarWidth] = useState(0);
54
55
  const placement = useRef("bottom");
55
56
  const lastFilter = useRef("");
56
57
  const listRef = useRef();
@@ -66,6 +67,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
66
67
  allowScroll();
67
68
  };
68
69
  }, [allowScroll, blockScroll]);
70
+ useLayoutEffect(() => {
71
+ if (multiColumn) {
72
+ setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
73
+ }
74
+ }, [multiColumn]);
69
75
  const setPlacementCallback = useCallback(popper => {
70
76
  placement.current = popper.placement;
71
77
  }, [placement]);
@@ -287,7 +293,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
287
293
  let selectListContent = childrenWithListProps;
288
294
 
289
295
  if (multiColumn) {
290
- selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, null, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
296
+ selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
297
+ scrollbarWidth: scrollbarWidth
298
+ }, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
291
299
  ref: tableRef
292
300
  }, childrenWithListProps));
293
301
  }
package/esm/components/select/select-list/select-list.style.js CHANGED
@@ -74,11 +74,18 @@ const StyledSelectListTable = styled.table`
74
74
  `; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
75
75
 
76
76
  const StyledSelectListTableHeader = styled.thead`
77
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
78
+
79
+ tr {
80
+ width: ${({
81
+ scrollbarWidth
82
+ }) => `calc(100% - ${scrollbarWidth}px)`};
83
+ }
84
+
77
85
  th {
78
86
  position: sticky;
79
87
  top: 0;
80
88
  padding: var(--spacing200);
81
- border-bottom: 1px solid var(--colorsUtilityMajor050);
82
89
  background-color: white;
83
90
  text-align: left;
84
91
  font-weight: 900;
package/lib/components/select/select-list/select-list.component.js CHANGED
@@ -81,6 +81,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
81
81
  const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
82
82
  const [listHeight, setListHeight] = (0, _react.useState)(0);
83
83
  const [listWidth, setListWidth] = (0, _react.useState)(null);
84
+ const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
84
85
  const placement = (0, _react.useRef)("bottom");
85
86
  const lastFilter = (0, _react.useRef)("");
86
87
  const listRef = (0, _react.useRef)();
@@ -96,6 +97,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
96
97
  allowScroll();
97
98
  };
98
99
  }, [allowScroll, blockScroll]);
100
+ (0, _react.useLayoutEffect)(() => {
101
+ if (multiColumn) {
102
+ setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
103
+ }
104
+ }, [multiColumn]);
99
105
  const setPlacementCallback = (0, _react.useCallback)(popper => {
100
106
  placement.current = popper.placement;
101
107
  }, [placement]);
@@ -317,7 +323,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
317
323
  let selectListContent = childrenWithListProps;
318
324
 
319
325
  if (multiColumn) {
320
- selectListContent = /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTable, null, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableHeader, null, tableHeader), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableBody, {
326
+ selectListContent = /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTable, null, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableHeader, {
327
+ scrollbarWidth: scrollbarWidth
328
+ }, tableHeader), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableBody, {
321
329
  ref: tableRef
322
330
  }, childrenWithListProps));
323
331
  }
package/lib/components/select/select-list/select-list.style.js CHANGED
@@ -91,11 +91,18 @@ const StyledSelectListTable = _styledComponents.default.table`
91
91
 
92
92
  exports.StyledSelectListTable = StyledSelectListTable;
93
93
  const StyledSelectListTableHeader = _styledComponents.default.thead`
94
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
95
+
96
+ tr {
97
+ width: ${({
98
+ scrollbarWidth
99
+ }) => `calc(100% - ${scrollbarWidth}px)`};
100
+ }
101
+
94
102
  th {
95
103
  position: sticky;
96
104
  top: 0;
97
105
  padding: var(--spacing200);
98
- border-bottom: 1px solid var(--colorsUtilityMajor050);
99
106
  background-color: white;
100
107
  text-align: left;
101
108
  font-weight: 900;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "109.3.2",
3
+ "version": "109.3.3",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {
@@ -112,7 +112,7 @@
112
112
  "browserslist": "^4.16.6",
113
113
  "chalk": "^4.1.1",
114
114
  "chromatic": "^6.0.5",
115
- "commitizen": "^4.2.4",
115
+ "commitizen": "^4.2.5",
116
116
  "conventional-changelog-conventionalcommits": "^4.5.0",
117
117
  "core-js": "^3.20.3",
118
118
  "cross-env": "^5.2.0",