@carbon/ibm-products 2.43.2-canary.219 → 2.43.2-canary.222

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  2. package/es/components/Datagrid/types/index.d.ts +1 -0
  3. package/es/components/Datagrid/useFlexResize.d.ts +0 -6
  4. package/es/components/Datagrid/useFlexResize.js +33 -17
  5. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  6. package/lib/components/Datagrid/types/index.d.ts +1 -0
  7. package/lib/components/Datagrid/useFlexResize.d.ts +0 -6
  8. package/lib/components/Datagrid/useFlexResize.js +32 -16
  9. package/package.json +4 -4
package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js CHANGED
@@ -68,10 +68,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
68
68
 
69
69
  // Sync the scrollLeft position of the virtual body to the table header
70
70
  useEffect(function () {
71
+ var _document;
72
+ var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
73
+ var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
74
+ if (headEle) {
75
+ headEle.style.display = 'flex';
76
+ } // scrollbar width to header column to fix header alignment
77
+
71
78
  function handleScroll(event) {
72
- var _document;
73
79
  var virtualBody = event.target;
74
- var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
75
80
  if (headWrapEl) {
76
81
  headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
77
82
  }
package/es/components/Datagrid/types/index.d.ts CHANGED
@@ -249,6 +249,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
249
249
  onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
250
250
  ExpandedRowContentComponent?: JSXElementConstructor<any>;
251
251
  getAsyncSubRows?: (row: DatagridRow) => void;
252
+ enableSpacerColumn?: boolean;
252
253
  }
253
254
  export interface DataGridData {
254
255
  instance?: DataGridTableInstance;
package/es/components/Datagrid/useFlexResize.d.ts CHANGED
@@ -1,8 +1,2 @@
1
1
  export default useFlexResize;
2
- /**
3
- * Copyright IBM Corp. 2020, 2024
4
- *
5
- * This source code is licensed under the Apache-2.0 license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
2
  declare function useFlexResize(hooks: any): void;
package/es/components/Datagrid/useFlexResize.js CHANGED
@@ -5,33 +5,48 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
-
10
- /* eslint-disable no-unreachable */
11
- /**
12
- * Copyright IBM Corp. 2020, 2024
13
- *
14
- * This source code is licensed under the Apache-2.0 license found in the
15
- * LICENSE file in the root directory of this source tree.
16
- */
8
+ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import { useState, useEffect } from 'react';
17
10
 
18
11
  var useFlexResize = function useFlexResize(hooks) {
12
+ var _useState = useState(),
13
+ _useState2 = _slicedToArray(_useState, 2),
14
+ spacerColumn = _useState2[0],
15
+ setSpacerColumn = _useState2[1];
16
+ var useInstance = function useInstance(instance) {
17
+ var enableSpacerColumn = instance.enableSpacerColumn;
18
+ useEffect(function () {
19
+ setSpacerColumn(enableSpacerColumn);
20
+ });
21
+ };
22
+ var spacer = {
23
+ id: 'spacer',
24
+ width: 0,
25
+ disableSortBy: true,
26
+ disableResizing: true
27
+ };
19
28
  hooks.visibleColumns.push(function (columns) {
20
29
  // always move actions to the end
21
30
  var actionsIdx = columns.findIndex(function (col) {
22
31
  return col.isAction;
23
32
  });
24
- if (actionsIdx === -1) {
25
- var _lastCol = columns.at(-1);
26
- _lastCol.isFlexCol = true;
33
+ if (!spacerColumn && actionsIdx === -1) {
34
+ var lastCol = columns.at(-1);
35
+ lastCol.isFlexCol = true;
27
36
  return _toConsumableArray(columns);
37
+ } else if (spacerColumn & actionsIdx === -1) {
38
+ return [].concat(_toConsumableArray(columns), [spacer]);
28
39
  }
29
40
  var cols = _toConsumableArray(columns);
30
41
  var actions = cols.splice(actionsIdx, 1)[0];
31
- cols.splice(columns.length, 0, actions);
32
- // the last non-action action column should flex remaining space
33
- var lastCol = columns.at(-2);
34
- lastCol.isFlexCol = true;
42
+ if (spacerColumn) {
43
+ cols.splice(columns.length, 0, spacer, actions);
44
+ } else {
45
+ cols.splice(columns.length, 0, actions);
46
+ // the last non-action action column should flex remaining space
47
+ var _lastCol = columns.at(-2);
48
+ _lastCol.isFlexCol = true;
49
+ }
35
50
  return cols;
36
51
  });
37
52
  var changeProps = function changeProps(props, data) {
@@ -39,7 +54,7 @@ var useFlexResize = function useFlexResize(hooks) {
39
54
  if (!column && data.cell) {
40
55
  column = data.cell.column;
41
56
  }
42
- if (column.isFlexCol) {
57
+ if (column.isFlexCol || column.id === spacer.id) {
43
58
  return [props, {
44
59
  style: {
45
60
  flex: '1 1 0'
@@ -58,6 +73,7 @@ var useFlexResize = function useFlexResize(hooks) {
58
73
  hooks.getCellProps.push(function (props, data) {
59
74
  return changeProps(props, data);
60
75
  });
76
+ hooks.useInstance.push(useInstance);
61
77
  };
62
78
  var useFlexResize$1 = useFlexResize;
63
79
 
package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js CHANGED
@@ -76,10 +76,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
76
76
 
77
77
  // Sync the scrollLeft position of the virtual body to the table header
78
78
  React.useEffect(function () {
79
+ var _document;
80
+ var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
81
+ var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
82
+ if (headEle) {
83
+ headEle.style.display = 'flex';
84
+ } // scrollbar width to header column to fix header alignment
85
+
79
86
  function handleScroll(event) {
80
- var _document;
81
87
  var virtualBody = event.target;
82
- var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
83
88
  if (headWrapEl) {
84
89
  headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
85
90
  }
package/lib/components/Datagrid/types/index.d.ts CHANGED
@@ -249,6 +249,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
249
249
  onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
250
250
  ExpandedRowContentComponent?: JSXElementConstructor<any>;
251
251
  getAsyncSubRows?: (row: DatagridRow) => void;
252
+ enableSpacerColumn?: boolean;
252
253
  }
253
254
  export interface DataGridData {
254
255
  instance?: DataGridTableInstance;
package/lib/components/Datagrid/useFlexResize.d.ts CHANGED
@@ -1,8 +1,2 @@
1
1
  export default useFlexResize;
2
- /**
3
- * Copyright IBM Corp. 2020, 2024
4
- *
5
- * This source code is licensed under the Apache-2.0 license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
2
  declare function useFlexResize(hooks: any): void;
package/lib/components/Datagrid/useFlexResize.js CHANGED
@@ -10,32 +10,47 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
-
14
- /* eslint-disable no-unreachable */
15
- /**
16
- * Copyright IBM Corp. 2020, 2024
17
- *
18
- * This source code is licensed under the Apache-2.0 license found in the
19
- * LICENSE file in the root directory of this source tree.
20
- */
13
+ var React = require('react');
21
14
 
22
15
  var useFlexResize = function useFlexResize(hooks) {
16
+ var _useState = React.useState(),
17
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
18
+ spacerColumn = _useState2[0],
19
+ setSpacerColumn = _useState2[1];
20
+ var useInstance = function useInstance(instance) {
21
+ var enableSpacerColumn = instance.enableSpacerColumn;
22
+ React.useEffect(function () {
23
+ setSpacerColumn(enableSpacerColumn);
24
+ });
25
+ };
26
+ var spacer = {
27
+ id: 'spacer',
28
+ width: 0,
29
+ disableSortBy: true,
30
+ disableResizing: true
31
+ };
23
32
  hooks.visibleColumns.push(function (columns) {
24
33
  // always move actions to the end
25
34
  var actionsIdx = columns.findIndex(function (col) {
26
35
  return col.isAction;
27
36
  });
28
- if (actionsIdx === -1) {
29
- var _lastCol = columns.at(-1);
30
- _lastCol.isFlexCol = true;
37
+ if (!spacerColumn && actionsIdx === -1) {
38
+ var lastCol = columns.at(-1);
39
+ lastCol.isFlexCol = true;
31
40
  return _rollupPluginBabelHelpers.toConsumableArray(columns);
41
+ } else if (spacerColumn & actionsIdx === -1) {
42
+ return [].concat(_rollupPluginBabelHelpers.toConsumableArray(columns), [spacer]);
32
43
  }
33
44
  var cols = _rollupPluginBabelHelpers.toConsumableArray(columns);
34
45
  var actions = cols.splice(actionsIdx, 1)[0];
35
- cols.splice(columns.length, 0, actions);
36
- // the last non-action action column should flex remaining space
37
- var lastCol = columns.at(-2);
38
- lastCol.isFlexCol = true;
46
+ if (spacerColumn) {
47
+ cols.splice(columns.length, 0, spacer, actions);
48
+ } else {
49
+ cols.splice(columns.length, 0, actions);
50
+ // the last non-action action column should flex remaining space
51
+ var _lastCol = columns.at(-2);
52
+ _lastCol.isFlexCol = true;
53
+ }
39
54
  return cols;
40
55
  });
41
56
  var changeProps = function changeProps(props, data) {
@@ -43,7 +58,7 @@ var useFlexResize = function useFlexResize(hooks) {
43
58
  if (!column && data.cell) {
44
59
  column = data.cell.column;
45
60
  }
46
- if (column.isFlexCol) {
61
+ if (column.isFlexCol || column.id === spacer.id) {
47
62
  return [props, {
48
63
  style: {
49
64
  flex: '1 1 0'
@@ -62,6 +77,7 @@ var useFlexResize = function useFlexResize(hooks) {
62
77
  hooks.getCellProps.push(function (props, data) {
63
78
  return changeProps(props, data);
64
79
  });
80
+ hooks.useInstance.push(useInstance);
65
81
  };
66
82
  var useFlexResize$1 = useFlexResize;
67
83
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibm-products",
3
3
  "description": "Carbon for IBM Products",
4
- "version": "2.43.2-canary.219+173e6c645",
4
+ "version": "2.43.2-canary.222+9bd307e48",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -81,7 +81,7 @@
81
81
  "fs-extra": "^11.2.0",
82
82
  "glob": "^10.3.10",
83
83
  "jest": "^29.7.0",
84
- "jest-config-ibm-cloud-cognitive": "^1.8.0-rc.0",
84
+ "jest-config-ibm-cloud-cognitive": "^1.8.0",
85
85
  "jest-environment-jsdom": "^29.7.0",
86
86
  "namor": "^1.1.2",
87
87
  "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
96
96
  "dependencies": {
97
97
  "@babel/runtime": "^7.23.9",
98
98
  "@carbon/feature-flags": "^0.22.0",
99
- "@carbon/ibm-products-styles": "^2.39.1-canary.229+173e6c645",
99
+ "@carbon/ibm-products-styles": "^2.45.0",
100
100
  "@carbon/telemetry": "^0.1.0",
101
101
  "@dnd-kit/core": "^6.0.8",
102
102
  "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
120
120
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
121
121
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
122
122
  },
123
- "gitHead": "173e6c6455a4fe619d56148ab432926bc6c640a4"
123
+ "gitHead": "9bd307e4836d986383a0464e799834712f3904e0"
124
124
  }