@carbon/ibm-products 2.43.2-canary.11 → 2.43.2-canary.15

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.
@@ -211,9 +211,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
211
211
  }
212
212
  if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
213
213
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
214
- var _activeCellFullData$r;
215
214
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
216
- setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
215
+ if (activeCellFullData) {
216
+ setActiveCellContent(activeCellFullData.render('Cell'));
217
+ } else {
218
+ setActiveCellContent(null);
219
+ }
217
220
  }
218
221
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
219
222
  setActiveCellContent(null);
@@ -428,8 +431,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
428
431
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
429
432
  var activeCellValue;
430
433
  if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
431
- var _activeCellFullData$r2;
432
- activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
434
+ var _activeCellFullData$r;
435
+ activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
433
436
  }
434
437
  setCellEditorValue(activeCellValue || '');
435
438
  if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -5,10 +5,10 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
5
5
  import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
- import { CSSProperties, 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, UseTableHooks } from 'react-table';
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';
10
10
  import { CarbonIconType } from '@carbon/react/icons';
11
- import { type ButtonProps } from '@carbon/react';
11
+ import { IconButton, type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
13
13
  export type Size = 'xs' | 'sm' | 'md' | 'lg';
14
14
  export interface ResizerProps {
@@ -85,9 +85,10 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
85
85
  }
86
86
  export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
87
87
  }
88
- export interface DatagridColumn<T extends object = any> extends ColumnInstance<T> {
88
+ export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
89
89
  sticky?: 'left' | 'right';
90
90
  className?: string;
91
+ rightAlignedColumn?: boolean;
91
92
  disableSortBy?: boolean;
92
93
  centerAlignedColumn?: boolean;
93
94
  }
@@ -100,6 +101,7 @@ export interface DatagridRow<T extends object = any> extends Omit<Row<T>, 'cells
100
101
  RowExpansionRenderer?: (state?: DataGridState) => void;
101
102
  cells: Array<DataGridCell>;
102
103
  isSkeleton?: boolean;
104
+ hasExpanded?: boolean;
103
105
  }
104
106
  export interface DataGridHeader<T extends object = any> extends ColumnInstance, UseResizeColumnsColumnProps<T>, UseSortByColumnProps<T> {
105
107
  className(className: any, arg1: {
@@ -120,6 +122,16 @@ interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectSta
120
122
  }
121
123
  export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
122
124
  }
125
+ export interface RowAction {
126
+ id?: string;
127
+ itemText?: string;
128
+ icon?: ComponentType | FunctionComponent;
129
+ align?: React.ComponentProps<typeof IconButton>['align'];
130
+ shouldHideMenuItem?: (...args: any[]) => void;
131
+ shouldDisableMenuItem?: (...args: any[]) => void;
132
+ disabled?: boolean;
133
+ onClick?: (...args: any[]) => void;
134
+ }
123
135
  export interface DataGridState<T extends object = any> extends TableCommonProps, UsePaginationInstanceProps<T>, Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>, Omit<UseFiltersInstanceProps<T>, 'rows'>, UseRowSelectInstanceProps<T>, Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
124
136
  withVirtualScroll?: boolean;
125
137
  DatagridPagination?: JSXElementConstructor<any>;
@@ -142,6 +154,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
142
154
  batchActions?: boolean;
143
155
  row: DatagridRow;
144
156
  rows: Array<DatagridRow<any>>;
157
+ rowActions?: RowAction[];
145
158
  columns: Array<DatagridColumn>;
146
159
  key?: any;
147
160
  rowSize?: Size;
@@ -217,4 +230,5 @@ export interface ResizeHeaderProps {
217
230
  isFetching?: boolean;
218
231
  }
219
232
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
233
+ export type NodeFuncType = (props: any) => ReactNode;
220
234
  export {};
@@ -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 useActionsColumn: (hooks: Hooks) => void;
1
9
  export default useActionsColumn;
2
- declare function useActionsColumn(hooks: any): void;
@@ -17,9 +17,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
17
17
  var blockClass = "".concat(pkg.prefix, "--datagrid");
18
18
  var useActionsColumn = function useActionsColumn(hooks) {
19
19
  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
20
- var rowActions = instance.rowActions,
21
- isFetching = instance.isFetching,
22
- selectedRowIds = instance.state.selectedRowIds;
20
+ var _ref = instance,
21
+ rowActions = _ref.rowActions,
22
+ isFetching = _ref.isFetching,
23
+ selectedRowIds = _ref.state.selectedRowIds;
23
24
  var getDisabledState = function getDisabledState(rowIndex) {
24
25
  var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
25
26
  return Number(n);
@@ -79,10 +80,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
79
80
  return;
80
81
  }
81
82
  e.stopPropagation();
82
- _onClick(id, row, e);
83
+ _onClick === null || _onClick === void 0 || _onClick(id, row, e);
83
84
  },
84
85
  disabled: isDisabledByRow
85
- }), /*#__PURE__*/React__default.createElement(Icon, null)));
86
+ }), Icon && /*#__PURE__*/React__default.createElement(Icon, null)));
86
87
  })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(OverflowMenu, {
87
88
  align: "left",
88
89
  size: "sm",
@@ -108,7 +109,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
108
109
  disabled: isDisabledByRow,
109
110
  onClick: function onClick(e) {
110
111
  e.stopPropagation();
111
- _onClick2(id, row, e);
112
+ _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
112
113
  },
113
114
  key: id
114
115
  }));
@@ -1,2 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 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 useColumnRightAlign: (hooks: Hooks) => void;
1
9
  export default useColumnRightAlign;
2
- declare function useColumnRightAlign(hooks: any): void;
@@ -13,16 +13,17 @@ import { pkg } from '../../settings.js';
13
13
  var blockClass = "".concat(pkg.prefix, "--datagrid");
14
14
  var useColumnRightAlign = function useColumnRightAlign(hooks) {
15
15
  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
16
+ var _tableProps$column, _column$Cell;
16
17
  return /*#__PURE__*/React__default.createElement("div", {
17
18
  className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
18
- sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
19
+ sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
19
20
  })
20
- }, column.Cell(tableProps));
21
+ }, column === null || column === void 0 || (_column$Cell = column.Cell) === null || _column$Cell === void 0 ? void 0 : _column$Cell.call(column, tableProps));
21
22
  };
22
23
  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
23
24
  return /*#__PURE__*/React__default.createElement("div", {
24
25
  className: "".concat(blockClass, "__right-align-header")
25
- }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
26
+ }, typeof column.Header === 'function' ? (column === null || column === void 0 ? void 0 : column.Header.bind(column))(headerProp) : column.Header);
26
27
  };
27
28
  var rightAlignedColumns = function rightAlignedColumns(columns) {
28
29
  var columnsWithDefaultCells = columns.map(function (column) {
@@ -15,12 +15,30 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
15
15
  var useNestedRows = function useNestedRows(hooks) {
16
16
  useNestedRowExpander(hooks);
17
17
  var useInstance = function useInstance(instance) {
18
+ useEffect(function () {
19
+ var _ref = instance,
20
+ rows = _ref.rows;
21
+ var defaultExpandedRows = rows.filter(function (row) {
22
+ var _row$original;
23
+ return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
24
+ });
25
+ if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
26
+ defaultExpandedRows.map(function (defaultExpandedRow) {
27
+ if (!(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.isExpanded) && !(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.hasExpanded)) {
28
+ var _defaultExpandedRow$t;
29
+ defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
30
+ defaultExpandedRow.hasExpanded = true;
31
+ return;
32
+ }
33
+ });
34
+ }
35
+ }, [instance, instance.rows]);
18
36
  // This useEffect will expand rows if they exist in the initialState obj
19
37
  useEffect(function () {
20
38
  var rows = instance.rows,
21
39
  initialState = instance.initialState;
22
- var _ref = initialState,
23
- expandedRowIds = _ref.expandedRowIds;
40
+ var _ref2 = initialState,
41
+ expandedRowIds = _ref2.expandedRowIds;
24
42
  if (expandedRowIds) {
25
43
  Object.keys(expandedRowIds).forEach(function (key) {
26
44
  var row = rows.filter(function (r) {
@@ -34,14 +52,14 @@ var useNestedRows = function useNestedRows(hooks) {
34
52
  }
35
53
  }, [instance]);
36
54
  var marginLeft = 24;
37
- var getRowProps = function getRowProps(props, _ref2) {
38
- var row = _ref2.row;
55
+ var getRowProps = function getRowProps(props, _ref3) {
56
+ var row = _ref3.row;
39
57
  return [props, {
40
58
  className: cx(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
41
59
  }];
42
60
  };
43
- var getRowStyles = function getRowStyles(props, _ref3) {
44
- var row = _ref3.row;
61
+ var getRowStyles = function getRowStyles(props, _ref4) {
62
+ var row = _ref4.row;
45
63
  return [props, {
46
64
  style: {
47
65
  paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
@@ -51,9 +69,9 @@ var useNestedRows = function useNestedRows(hooks) {
51
69
  var getIndentation = function getIndentation(depth) {
52
70
  return 32 * depth + 16;
53
71
  }; // row indentation padding
54
- var getCellProps = function getCellProps(props, _ref4) {
55
- var cell = _ref4.cell,
56
- instance = _ref4.instance;
72
+ var getCellProps = function getCellProps(props, _ref5) {
73
+ var cell = _ref5.cell,
74
+ instance = _ref5.instance;
57
75
  // we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
58
76
  var isFirstCell = instance.columns.findIndex(function (c) {
59
77
  return c.id === cell.column.id;
@@ -220,9 +220,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
220
220
  }
221
221
  if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
222
222
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
223
- var _activeCellFullData$r;
224
223
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
225
- setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
224
+ if (activeCellFullData) {
225
+ setActiveCellContent(activeCellFullData.render('Cell'));
226
+ } else {
227
+ setActiveCellContent(null);
228
+ }
226
229
  }
227
230
  if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
228
231
  setActiveCellContent(null);
@@ -437,8 +440,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
437
440
  var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
438
441
  var activeCellValue;
439
442
  if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
440
- var _activeCellFullData$r2;
441
- activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
443
+ var _activeCellFullData$r;
444
+ activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
442
445
  }
443
446
  setCellEditorValue(activeCellValue || '');
444
447
  if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -5,10 +5,10 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
5
5
  import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
6
6
  import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
7
7
  import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
8
- import { CSSProperties, 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, UseTableHooks } from 'react-table';
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';
10
10
  import { CarbonIconType } from '@carbon/react/icons';
11
- import { type ButtonProps } from '@carbon/react';
11
+ import { IconButton, type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
13
13
  export type Size = 'xs' | 'sm' | 'md' | 'lg';
14
14
  export interface ResizerProps {
@@ -85,9 +85,10 @@ export interface DataGridToggleAllRowsProps extends TableToggleAllRowsSelectedPr
85
85
  }
86
86
  export interface DatagridTableHooks<T extends object = any> extends UseTableHooks<T> {
87
87
  }
88
- export interface DatagridColumn<T extends object = any> extends ColumnInstance<T> {
88
+ export interface DatagridColumn<T extends object = any> extends ColumnInstance<T>, UseSortByOptions<T> {
89
89
  sticky?: 'left' | 'right';
90
90
  className?: string;
91
+ rightAlignedColumn?: boolean;
91
92
  disableSortBy?: boolean;
92
93
  centerAlignedColumn?: boolean;
93
94
  }
@@ -100,6 +101,7 @@ export interface DatagridRow<T extends object = any> extends Omit<Row<T>, 'cells
100
101
  RowExpansionRenderer?: (state?: DataGridState) => void;
101
102
  cells: Array<DataGridCell>;
102
103
  isSkeleton?: boolean;
104
+ hasExpanded?: boolean;
103
105
  }
104
106
  export interface DataGridHeader<T extends object = any> extends ColumnInstance, UseResizeColumnsColumnProps<T>, UseSortByColumnProps<T> {
105
107
  className(className: any, arg1: {
@@ -120,6 +122,16 @@ interface DataGridTableState extends UseResizeColumnsState<any>, UseRowSelectSta
120
122
  }
121
123
  export interface DataGridTableInstance<T extends object = any> extends TableInstance<T> {
122
124
  }
125
+ export interface RowAction {
126
+ id?: string;
127
+ itemText?: string;
128
+ icon?: ComponentType | FunctionComponent;
129
+ align?: React.ComponentProps<typeof IconButton>['align'];
130
+ shouldHideMenuItem?: (...args: any[]) => void;
131
+ shouldDisableMenuItem?: (...args: any[]) => void;
132
+ disabled?: boolean;
133
+ onClick?: (...args: any[]) => void;
134
+ }
123
135
  export interface DataGridState<T extends object = any> extends TableCommonProps, UsePaginationInstanceProps<T>, Omit<TableInstance<T>, 'state' | 'headers' | 'rows' | 'columns'>, Omit<UseFiltersInstanceProps<T>, 'rows'>, UseRowSelectInstanceProps<T>, Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'> {
124
136
  withVirtualScroll?: boolean;
125
137
  DatagridPagination?: JSXElementConstructor<any>;
@@ -142,6 +154,7 @@ export interface DataGridState<T extends object = any> extends TableCommonProps,
142
154
  batchActions?: boolean;
143
155
  row: DatagridRow;
144
156
  rows: Array<DatagridRow<any>>;
157
+ rowActions?: RowAction[];
145
158
  columns: Array<DatagridColumn>;
146
159
  key?: any;
147
160
  rowSize?: Size;
@@ -217,4 +230,5 @@ export interface ResizeHeaderProps {
217
230
  isFetching?: boolean;
218
231
  }
219
232
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
233
+ export type NodeFuncType = (props: any) => ReactNode;
220
234
  export {};
@@ -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 useActionsColumn: (hooks: Hooks) => void;
1
9
  export default useActionsColumn;
2
- declare function useActionsColumn(hooks: any): void;
@@ -26,9 +26,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
26
26
  var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
27
27
  var useActionsColumn = function useActionsColumn(hooks) {
28
28
  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
29
- var rowActions = instance.rowActions,
30
- isFetching = instance.isFetching,
31
- selectedRowIds = instance.state.selectedRowIds;
29
+ var _ref = instance,
30
+ rowActions = _ref.rowActions,
31
+ isFetching = _ref.isFetching,
32
+ selectedRowIds = _ref.state.selectedRowIds;
32
33
  var getDisabledState = function getDisabledState(rowIndex) {
33
34
  var selectedRowIndexes = Object.keys(selectedRowIds).map(function (n) {
34
35
  return Number(n);
@@ -88,10 +89,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
88
89
  return;
89
90
  }
90
91
  e.stopPropagation();
91
- _onClick(id, row, e);
92
+ _onClick === null || _onClick === void 0 || _onClick(id, row, e);
92
93
  },
93
94
  disabled: isDisabledByRow
94
- }), /*#__PURE__*/React__default["default"].createElement(Icon, null)));
95
+ }), Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null)));
95
96
  })), !isFetching && (rowActions.length > 2 || isColumnSticky) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(react.OverflowMenu, {
96
97
  align: "left",
97
98
  size: "sm",
@@ -117,7 +118,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
117
118
  disabled: isDisabledByRow,
118
119
  onClick: function onClick(e) {
119
120
  e.stopPropagation();
120
- _onClick2(id, row, e);
121
+ _onClick2 === null || _onClick2 === void 0 || _onClick2(id, row, e);
121
122
  },
122
123
  key: id
123
124
  }));
@@ -1,2 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2020, 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 useColumnRightAlign: (hooks: Hooks) => void;
1
9
  export default useColumnRightAlign;
2
- declare function useColumnRightAlign(hooks: any): void;
@@ -22,16 +22,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
22
22
  var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
23
23
  var useColumnRightAlign = function useColumnRightAlign(hooks) {
24
24
  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
25
+ var _tableProps$column, _column$Cell;
25
26
  return /*#__PURE__*/React__default["default"].createElement("div", {
26
27
  className: cx__default["default"]("".concat(blockClass, "__right-align-cell-renderer"), {
27
- sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
28
+ sortDisabled: !tableProps.isTableSortable || (tableProps === null || tableProps === void 0 || (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.disableSortBy) === true
28
29
  })
29
- }, column.Cell(tableProps));
30
+ }, column === null || column === void 0 || (_column$Cell = column.Cell) === null || _column$Cell === void 0 ? void 0 : _column$Cell.call(column, tableProps));
30
31
  };
31
32
  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
32
33
  return /*#__PURE__*/React__default["default"].createElement("div", {
33
34
  className: "".concat(blockClass, "__right-align-header")
34
- }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
35
+ }, typeof column.Header === 'function' ? (column === null || column === void 0 ? void 0 : column.Header.bind(column))(headerProp) : column.Header);
35
36
  };
36
37
  var rightAlignedColumns = function rightAlignedColumns(columns) {
37
38
  var columnsWithDefaultCells = columns.map(function (column) {
@@ -23,12 +23,30 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
23
23
  var useNestedRows = function useNestedRows(hooks) {
24
24
  useNestedRowExpander["default"](hooks);
25
25
  var useInstance = function useInstance(instance) {
26
+ React.useEffect(function () {
27
+ var _ref = instance,
28
+ rows = _ref.rows;
29
+ var defaultExpandedRows = rows.filter(function (row) {
30
+ var _row$original;
31
+ return row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.defaultExpanded;
32
+ });
33
+ if (defaultExpandedRows !== null && defaultExpandedRows !== void 0 && defaultExpandedRows.length) {
34
+ defaultExpandedRows.map(function (defaultExpandedRow) {
35
+ if (!(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.isExpanded) && !(defaultExpandedRow !== null && defaultExpandedRow !== void 0 && defaultExpandedRow.hasExpanded)) {
36
+ var _defaultExpandedRow$t;
37
+ defaultExpandedRow === null || defaultExpandedRow === void 0 || (_defaultExpandedRow$t = defaultExpandedRow.toggleRowExpanded) === null || _defaultExpandedRow$t === void 0 || _defaultExpandedRow$t.call(defaultExpandedRow);
38
+ defaultExpandedRow.hasExpanded = true;
39
+ return;
40
+ }
41
+ });
42
+ }
43
+ }, [instance, instance.rows]);
26
44
  // This useEffect will expand rows if they exist in the initialState obj
27
45
  React.useEffect(function () {
28
46
  var rows = instance.rows,
29
47
  initialState = instance.initialState;
30
- var _ref = initialState,
31
- expandedRowIds = _ref.expandedRowIds;
48
+ var _ref2 = initialState,
49
+ expandedRowIds = _ref2.expandedRowIds;
32
50
  if (expandedRowIds) {
33
51
  Object.keys(expandedRowIds).forEach(function (key) {
34
52
  var row = rows.filter(function (r) {
@@ -42,14 +60,14 @@ var useNestedRows = function useNestedRows(hooks) {
42
60
  }
43
61
  }, [instance]);
44
62
  var marginLeft = 24;
45
- var getRowProps = function getRowProps(props, _ref2) {
46
- var row = _ref2.row;
63
+ var getRowProps = function getRowProps(props, _ref3) {
64
+ var row = _ref3.row;
47
65
  return [props, {
48
66
  className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
49
67
  }];
50
68
  };
51
- var getRowStyles = function getRowStyles(props, _ref3) {
52
- var row = _ref3.row;
69
+ var getRowStyles = function getRowStyles(props, _ref4) {
70
+ var row = _ref4.row;
53
71
  return [props, {
54
72
  style: {
55
73
  paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
@@ -59,9 +77,9 @@ var useNestedRows = function useNestedRows(hooks) {
59
77
  var getIndentation = function getIndentation(depth) {
60
78
  return 32 * depth + 16;
61
79
  }; // row indentation padding
62
- var getCellProps = function getCellProps(props, _ref4) {
63
- var cell = _ref4.cell,
64
- instance = _ref4.instance;
80
+ var getCellProps = function getCellProps(props, _ref5) {
81
+ var cell = _ref5.cell,
82
+ instance = _ref5.instance;
65
83
  // we add a dynamic -ve margin right only if the cell is resized below minimum width i.e 50px, else we set the width based on indentation at different levels
66
84
  var isFirstCell = instance.columns.findIndex(function (c) {
67
85
  return c.id === cell.column.id;
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.11+91f282e56",
4
+ "version": "2.43.2-canary.15+d38593707",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -95,7 +95,7 @@
95
95
  "dependencies": {
96
96
  "@babel/runtime": "^7.23.9",
97
97
  "@carbon/feature-flags": "^0.20.0",
98
- "@carbon/ibm-products-styles": "^2.39.1-canary.21+91f282e56",
98
+ "@carbon/ibm-products-styles": "^2.39.0",
99
99
  "@carbon/telemetry": "^0.1.0",
100
100
  "@dnd-kit/core": "^6.0.8",
101
101
  "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +119,5 @@
119
119
  "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
120
120
  "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
121
121
  },
122
- "gitHead": "91f282e56eec038f7efda4dd15c08d708c46cb58"
122
+ "gitHead": "d38593707b174e14377e467257a4864dc78c8513"
123
123
  }