@carbon/ibm-products 2.43.2-canary.57 → 2.43.2-canary.58

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/es/components/Datagrid/types/index.d.ts +9 -6
  2. package/es/components/Datagrid/useStickyColumn.d.ts +8 -1
  3. package/es/components/Datagrid/useStickyColumn.js +12 -9
  4. package/lib/components/Datagrid/types/index.d.ts +9 -6
  5. package/lib/components/Datagrid/useStickyColumn.d.ts +8 -1
  6. package/lib/components/Datagrid/useStickyColumn.js +12 -9
  7. package/package.json +2 -2
package/es/components/Datagrid/types/index.d.ts CHANGED
@@ -6,7 +6,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
8
  import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
9
- import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
9
+ import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
10
10
  import { CarbonIconType } from '@carbon/react/icons';
11
11
  import { IconButton, type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -97,7 +97,7 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
97
97
  }
98
98
  export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
99
99
  }
100
- export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
100
+ export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T>, Partial<UseResizeColumnsColumnProps<T>>, UseResizeColumnsOptions<T> {
101
101
  sticky?: 'left' | 'right';
102
102
  className?: string;
103
103
  rightAlignedColumn?: boolean;
@@ -124,15 +124,13 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
124
124
  }
125
125
  export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
126
126
  }
127
- export interface TableProps {
128
- className?: string;
129
- role?: string;
130
- style?: CSSStyleDeclaration;
127
+ export interface DataGridTableProps extends TableCommonProps {
131
128
  }
132
129
  interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectState<any> {
133
130
  filters: Filters<DataGridFilter>;
134
131
  }
135
132
  export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
133
+ withSelectRows?: boolean;
136
134
  }
137
135
  export interface RowAction {
138
136
  id?: string;
@@ -234,6 +232,11 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
234
232
  onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
235
233
  ExpandedRowContentComponent?: JSXElementConstructor<any>;
236
234
  }
235
+ export interface DataGridData {
236
+ instance?: DataGridTableInstance;
237
+ column?: DatagridColumn;
238
+ cell?: DataGridCell;
239
+ }
237
240
  export interface ResizeHeaderProps {
238
241
  resizerProps?: ResizerProps;
239
242
  header: DataGridHeader;
package/es/components/Datagrid/useStickyColumn.d.ts CHANGED
@@ -1,2 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { Hooks } from 'react-table';
8
+ declare const useStickyColumn: (hooks: Hooks) => void;
1
9
  export default useStickyColumn;
2
- declare function useStickyColumn(hooks: any): void;
package/es/components/Datagrid/useStickyColumn.js CHANGED
@@ -18,12 +18,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
18
18
  var useStickyColumn = function useStickyColumn(hooks) {
19
19
  var tableBodyRef = useRef();
20
20
  var stickyHeaderCellRef = useRef();
21
- var _useState = useState(null),
21
+ var _useState = useState(),
22
22
  _useState2 = _slicedToArray(_useState, 2),
23
23
  windowSize = _useState2[0],
24
24
  setWindowSize = _useState2[1];
25
25
  useEffect(function () {
26
- setWindowSize(window.innerWidth);
26
+ var _window;
27
+ setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
27
28
  }, []);
28
29
  useLayoutEffect(function () {
29
30
  /* istanbul ignore next */
@@ -49,10 +50,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
49
50
  var useEventListener = function useEventListener(instance) {
50
51
  useEffect(function () {
51
52
  var tableBodyElement = tableBodyRef.current;
52
- var headerCellElement = stickyHeaderCellRef.current;
53
+ var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
53
54
  /* istanbul ignore next */
54
55
  if (hasVertScroll(tableBodyElement) && headerCellElement) {
55
- headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
56
+ var _headerCellElement$cl;
57
+ headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
56
58
  }
57
59
  var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
58
60
  /* istanbul ignore next */
@@ -74,7 +76,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
74
76
  };
75
77
  toggleStickyShadow(tableBodyElement, headerCellElement);
76
78
  if (tableBodyElement) {
77
- tableBodyElement.addEventListener('scroll', listener);
79
+ tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
78
80
  }
79
81
  return function () {
80
82
  if (tableBodyElement) {
@@ -138,18 +140,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
138
140
  }];
139
141
  };
140
142
  var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
141
- var column = data.column || data.cell.column;
142
- if (column.sticky === 'right') {
143
+ var _data$cell;
144
+ var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
145
+ if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
143
146
  return [props, _objectSpread2({
144
147
  className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
145
148
  }, headerCellRef && {
146
149
  ref: headerCellRef
147
150
  })];
148
151
  }
149
- if (column.sticky === 'left') {
152
+ if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
150
153
  var _data$instance;
151
154
  return [props, _objectSpread2({
152
- className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
155
+ className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
153
156
  }, headerCellRef && {
154
157
  ref: headerCellRef
155
158
  })];
package/lib/components/Datagrid/types/index.d.ts CHANGED
@@ -6,7 +6,7 @@ import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonG
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
8
  import React, { CSSProperties, ComponentType, FunctionComponent, JSXElementConstructor, MutableRefObject, ReactNode, TouchEventHandler } from 'react';
9
- import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
9
+ import { Cell, Column, ColumnInstance, FilterValue, Filters, HeaderGroup, Meta, Row, TableCommonProps, TableDispatch, TableInstance, TableToggleAllRowsSelectedProps, UseExpandedRowProps, UseFiltersInstanceProps, UsePaginationInstanceProps, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectRowProps, UseRowSelectState, UseSortByColumnProps, UseSortByOptions, UseTableHooks } from 'react-table';
10
10
  import { CarbonIconType } from '@carbon/react/icons';
11
11
  import { IconButton, type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -97,7 +97,7 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
97
97
  }
98
98
  export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
99
99
  }
100
- export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
100
+ export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T>, Partial<UseResizeColumnsColumnProps<T>>, UseResizeColumnsOptions<T> {
101
101
  sticky?: 'left' | 'right';
102
102
  className?: string;
103
103
  rightAlignedColumn?: boolean;
@@ -124,15 +124,13 @@ export interface DataGridHeader<T extends object = any> extends ColumnInstance,
124
124
  }
125
125
  export interface DataGridHeaderGroup<T extends object = any> extends HeaderGroup<T>, UseResizeColumnsColumnProps<T> {
126
126
  }
127
- export interface TableProps {
128
- className?: string;
129
- role?: string;
130
- style?: CSSStyleDeclaration;
127
+ export interface DataGridTableProps extends TableCommonProps {
131
128
  }
132
129
  interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectState<any> {
133
130
  filters: Filters<DataGridFilter>;
134
131
  }
135
132
  export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
133
+ withSelectRows?: boolean;
136
134
  }
137
135
  export interface RowAction {
138
136
  id?: string;
@@ -234,6 +232,11 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
234
232
  onRowExpand?: (row: DatagridRow, event: React.MouseEvent<HTMLElement>) => void;
235
233
  ExpandedRowContentComponent?: JSXElementConstructor<any>;
236
234
  }
235
+ export interface DataGridData {
236
+ instance?: DataGridTableInstance;
237
+ column?: DatagridColumn;
238
+ cell?: DataGridCell;
239
+ }
237
240
  export interface ResizeHeaderProps {
238
241
  resizerProps?: ResizerProps;
239
242
  header: DataGridHeader;
package/lib/components/Datagrid/useStickyColumn.d.ts CHANGED
@@ -1,2 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2021, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { Hooks } from 'react-table';
8
+ declare const useStickyColumn: (hooks: Hooks) => void;
1
9
  export default useStickyColumn;
2
- declare function useStickyColumn(hooks: any): void;
package/lib/components/Datagrid/useStickyColumn.js CHANGED
@@ -27,12 +27,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
27
27
  var useStickyColumn = function useStickyColumn(hooks) {
28
28
  var tableBodyRef = React.useRef();
29
29
  var stickyHeaderCellRef = React.useRef();
30
- var _useState = React.useState(null),
30
+ var _useState = React.useState(),
31
31
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
32
32
  windowSize = _useState2[0],
33
33
  setWindowSize = _useState2[1];
34
34
  React.useEffect(function () {
35
- setWindowSize(window.innerWidth);
35
+ var _window;
36
+ setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
36
37
  }, []);
37
38
  React.useLayoutEffect(function () {
38
39
  /* istanbul ignore next */
@@ -58,10 +59,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
58
59
  var useEventListener = function useEventListener(instance) {
59
60
  React.useEffect(function () {
60
61
  var tableBodyElement = tableBodyRef.current;
61
- var headerCellElement = stickyHeaderCellRef.current;
62
+ var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
62
63
  /* istanbul ignore next */
63
64
  if (hasVertScroll(tableBodyElement) && headerCellElement) {
64
- headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
65
+ var _headerCellElement$cl;
66
+ headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
65
67
  }
66
68
  var boundListener = debounce__default["default"](onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
67
69
  /* istanbul ignore next */
@@ -83,7 +85,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
83
85
  };
84
86
  toggleStickyShadow(tableBodyElement, headerCellElement);
85
87
  if (tableBodyElement) {
86
- tableBodyElement.addEventListener('scroll', listener);
88
+ tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
87
89
  }
88
90
  return function () {
89
91
  if (tableBodyElement) {
@@ -147,18 +149,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
147
149
  }];
148
150
  };
149
151
  var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
150
- var column = data.column || data.cell.column;
151
- if (column.sticky === 'right') {
152
+ var _data$cell;
153
+ var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
154
+ if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
152
155
  return [props, _rollupPluginBabelHelpers.objectSpread2({
153
156
  className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
154
157
  }, headerCellRef && {
155
158
  ref: headerCellRef
156
159
  })];
157
160
  }
158
- if (column.sticky === 'left') {
161
+ if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
159
162
  var _data$instance;
160
163
  return [props, _rollupPluginBabelHelpers.objectSpread2({
161
- className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
164
+ className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
162
165
  }, headerCellRef && {
163
166
  ref: headerCellRef
164
167
  })];
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.57+e093199d5",
4
+ "version": "2.43.2-canary.58+78962b154",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -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": "e093199d509d0eb222ee9eedbdc455fae6f66aaf"
123
+ "gitHead": "78962b154b909895d77aa523ea96ade0044b9f34"
124
124
  }