@itwin/itwinui-react 1.37.1 → 1.37.2

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 (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/cjs/core/Table/Table.js +17 -5
  3. package/cjs/core/Table/cells/EditableCell.js +2 -1
  4. package/esm/core/Table/Table.js +17 -5
  5. package/esm/core/Table/cells/EditableCell.js +2 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ### [1.37.2](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.1...v1.37.2) (2022-05-04)
4
+
5
+ ### Fixes
6
+
7
+ * **Table:** Fix direction of sort icons ([#645](https://www.github.com/iTwin/iTwinUI-react/issues/645)) ([1a0683b](https://www.github.com/iTwin/iTwinUI-react/commit/1a0683b2d8f18b8ec80412e2208fbfa12df88d51))
8
+ * **Table:** Fix error of headless table ([#648](https://www.github.com/iTwin/iTwinUI-react/issues/648)) ([87c6b9e](https://www.github.com/iTwin/iTwinUI-react/commit/87c6b9eb0b8338357aec107af3f7a7539dd0f5a3))
9
+
3
10
  ### [1.37.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.0...v1.37.1) (2022-04-22)
4
11
 
5
12
  ### Fixes
package/cjs/core/Table/Table.js CHANGED
@@ -49,6 +49,16 @@ var columns_1 = require("./columns");
49
49
  var singleRowSelectedAction = 'singleRowSelected';
50
50
  exports.tableResizeStartAction = 'tableResizeStart';
51
51
  var tableResizeEndAction = 'tableResizeEnd';
52
+ var flattenColumns = function (columns) {
53
+ var flatColumns = [];
54
+ columns.forEach(function (column) {
55
+ flatColumns.push(column);
56
+ if (column.columns) {
57
+ flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
58
+ }
59
+ });
60
+ return flatColumns;
61
+ };
52
62
  /**
53
63
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
54
64
  * @example
@@ -93,10 +103,9 @@ var tableResizeEndAction = 'tableResizeEnd';
93
103
  */
94
104
  var Table = function (props) {
95
105
  var _a;
96
- var _b;
97
- var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
106
+ var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
98
107
  (0, utils_1.useTheme)();
99
- var _r = react_1.default.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
108
+ var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
100
109
  var defaultColumn = react_1.default.useMemo(function () { return ({
101
110
  maxWidth: 0,
102
111
  minWidth: 0,
@@ -109,7 +118,10 @@ var Table = function (props) {
109
118
  onBottomReachedRef.current = onBottomReached;
110
119
  onRowInViewportRef.current = onRowInViewport;
111
120
  }, [onBottomReached, onRowInViewport]);
112
- var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
121
+ var hasManualSelectionColumn = react_1.default.useMemo(function () {
122
+ var flatColumns = flattenColumns(columns);
123
+ return flatColumns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
124
+ }, [columns]);
113
125
  var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
114
126
  switch (action.type) {
115
127
  case react_table_1.actions.toggleSortBy:
@@ -299,7 +311,7 @@ var Table = function (props) {
299
311
  } }),
300
312
  column.render('Header'),
301
313
  (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
302
- data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
314
+ data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
303
315
  isResizable &&
304
316
  column.isResizerVisible &&
305
317
  index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
package/cjs/core/Table/cells/EditableCell.js CHANGED
@@ -42,7 +42,8 @@ var react_1 = __importDefault(require("react"));
42
42
  * }
43
43
  */
44
44
  var EditableCell = function (props) {
45
- var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children"]);
45
+ var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, isDisabled = props.isDisabled, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children", "isDisabled"]);
46
+ isDisabled; // To omit and prevent eslint error.
46
47
  var sanitizeString = function (text) {
47
48
  return text.replace(/(\r\n|\n|\r)+/gm, ' ');
48
49
  };
package/esm/core/Table/Table.js CHANGED
@@ -43,6 +43,16 @@ import { SELECTION_CELL_ID } from './columns';
43
43
  var singleRowSelectedAction = 'singleRowSelected';
44
44
  export var tableResizeStartAction = 'tableResizeStart';
45
45
  var tableResizeEndAction = 'tableResizeEnd';
46
+ var flattenColumns = function (columns) {
47
+ var flatColumns = [];
48
+ columns.forEach(function (column) {
49
+ flatColumns.push(column);
50
+ if (column.columns) {
51
+ flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
52
+ }
53
+ });
54
+ return flatColumns;
55
+ };
46
56
  /**
47
57
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
48
58
  * @example
@@ -87,10 +97,9 @@ var tableResizeEndAction = 'tableResizeEnd';
87
97
  */
88
98
  export var Table = function (props) {
89
99
  var _a;
90
- var _b;
91
- var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
100
+ var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
92
101
  useTheme();
93
- var _r = React.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
102
+ var _q = React.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
94
103
  var defaultColumn = React.useMemo(function () { return ({
95
104
  maxWidth: 0,
96
105
  minWidth: 0,
@@ -103,7 +112,10 @@ export var Table = function (props) {
103
112
  onBottomReachedRef.current = onBottomReached;
104
113
  onRowInViewportRef.current = onRowInViewport;
105
114
  }, [onBottomReached, onRowInViewport]);
106
- var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === SELECTION_CELL_ID; });
115
+ var hasManualSelectionColumn = React.useMemo(function () {
116
+ var flatColumns = flattenColumns(columns);
117
+ return flatColumns.some(function (column) { return column.id === SELECTION_CELL_ID; });
118
+ }, [columns]);
107
119
  var tableStateReducer = React.useCallback(function (newState, action, previousState, instance) {
108
120
  switch (action.type) {
109
121
  case TableActions.toggleSortBy:
@@ -293,7 +305,7 @@ export var Table = function (props) {
293
305
  } }),
294
306
  column.render('Header'),
295
307
  (data.length !== 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
296
- data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
308
+ data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
297
309
  isResizable &&
298
310
  column.isResizerVisible &&
299
311
  index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
package/esm/core/Table/cells/EditableCell.js CHANGED
@@ -36,7 +36,8 @@ import React from 'react';
36
36
  * }
37
37
  */
38
38
  export var EditableCell = function (props) {
39
- var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children"]);
39
+ var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, isDisabled = props.isDisabled, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children", "isDisabled"]);
40
+ isDisabled; // To omit and prevent eslint error.
40
41
  var sanitizeString = function (text) {
41
42
  return text.replace(/(\r\n|\n|\r)+/gm, ' ');
42
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "1.37.1",
3
+ "version": "1.37.2",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",
@@ -43,7 +43,7 @@
43
43
  "copy-files": "cpx \"../../{README,LICENSE}.md\" .",
44
44
  "storybook": "start-storybook -p 6006",
45
45
  "dev": "yarn storybook",
46
- "build-storybook": "build-storybook"
46
+ "build-storybook": "yarn copy-files && build-storybook"
47
47
  },
48
48
  "dependencies": {
49
49
  "@itwin/itwinui-css": "^0.55.0",