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

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 (9) hide show
  1. package/es/components/Datagrid/types/index.d.ts +5 -2
  2. package/es/components/Datagrid/useColumnRightAlign.d.ts +8 -1
  3. package/es/components/Datagrid/useColumnRightAlign.js +4 -3
  4. package/es/components/Datagrid/useNestedRows.js +27 -9
  5. package/lib/components/Datagrid/types/index.d.ts +5 -2
  6. package/lib/components/Datagrid/useColumnRightAlign.d.ts +8 -1
  7. package/lib/components/Datagrid/useColumnRightAlign.js +4 -3
  8. package/lib/components/Datagrid/useNestedRows.js +27 -9
  9. package/package.json +3 -3
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 { 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';
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
11
  import { type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -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: {
@@ -217,4 +219,5 @@ export interface ResizeHeaderProps {
217
219
  isFetching?: boolean;
218
220
  }
219
221
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
222
+ export type NodeFuncType = (props: any) => ReactNode;
220
223
  export {};
package/es/components/Datagrid/useColumnRightAlign.d.ts CHANGED
@@ -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;
package/es/components/Datagrid/useColumnRightAlign.js CHANGED
@@ -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) {
package/es/components/Datagrid/useNestedRows.js CHANGED
@@ -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;
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 { 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';
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
11
  import { type ButtonProps } from '@carbon/react';
12
12
  import { TableBatchActionsProps } from '@carbon/react/lib/components/DataTable/TableBatchActions';
@@ -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: {
@@ -217,4 +219,5 @@ export interface ResizeHeaderProps {
217
219
  isFetching?: boolean;
218
220
  }
219
221
  export type VisibleColumns<T extends object = {}> = (allColumns: Array<ColumnInstance<T>>, meta: Meta<T>) => Array<Column<T>>;
222
+ export type NodeFuncType = (props: any) => ReactNode;
220
223
  export {};
package/lib/components/Datagrid/useColumnRightAlign.d.ts CHANGED
@@ -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;
package/lib/components/Datagrid/useColumnRightAlign.js CHANGED
@@ -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) {
package/lib/components/Datagrid/useNestedRows.js CHANGED
@@ -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.12+b9055f1a5",
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": "b9055f1a58d6b8c093b418db05a7768000e6944f"
123
123
  }