@carbon/ibm-products 2.0.0-rc.21 → 2.0.0-rc.23
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +4849 -2937
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +61 -43
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +117 -73
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +342 -106
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/Card/CardFooter.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
- package/es/components/Datagrid/useActionsColumn.js +29 -1
- package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
- package/es/components/Datagrid/useNestedRows.js +2 -4
- package/es/components/Datagrid/useSelectAllToggle.js +18 -2
- package/es/components/Datagrid/useSelectRows.js +19 -2
- package/es/components/Datagrid/useStickyColumn.js +22 -5
- package/es/components/PageHeader/PageHeaderTitle.js +1 -0
- package/es/components/SidePanel/SidePanel.js +14 -5
- package/es/components/Tearsheet/TearsheetShell.js +6 -4
- package/lib/components/Card/CardFooter.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
- package/lib/components/Datagrid/useActionsColumn.js +30 -1
- package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
- package/lib/components/Datagrid/useNestedRows.js +2 -4
- package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
- package/lib/components/Datagrid/useSelectRows.js +26 -2
- package/lib/components/Datagrid/useStickyColumn.js +22 -4
- package/lib/components/PageHeader/PageHeaderTitle.js +1 -0
- package/lib/components/SidePanel/SidePanel.js +14 -5
- package/lib/components/Tearsheet/TearsheetShell.js +4 -2
- package/package.json +8 -8
- package/scss/components/Datagrid/styles/_datagrid.scss +25 -3
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +1 -3
- package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
- package/scss/components/Tearsheet/_tearsheet.scss +4 -5
@@ -4,6 +4,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
4
4
|
var _excluded = ["id", "itemText", "onClick", "icon"],
|
5
5
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
6
6
|
|
7
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
8
|
+
|
9
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
10
|
+
|
7
11
|
/*
|
8
12
|
* Licensed Materials - Property of IBM
|
9
13
|
* 5724-Q36
|
@@ -109,7 +113,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
109
113
|
})))),
|
110
114
|
className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
|
111
115
|
style: {
|
112
|
-
width: 96
|
116
|
+
width: rowActions.length > 2 ? 48 : 96
|
113
117
|
}
|
114
118
|
}];
|
115
119
|
}
|
@@ -121,6 +125,30 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
121
125
|
}
|
122
126
|
};
|
123
127
|
|
128
|
+
var useStickyHeaderWidth = function useStickyHeaderWidth(instance) {
|
129
|
+
var rowActions = instance.rowActions;
|
130
|
+
|
131
|
+
if (rowActions && Array.isArray(rowActions)) {
|
132
|
+
var addHeaderWidth = function addHeaderWidth(props, cellData) {
|
133
|
+
var column = cellData.column;
|
134
|
+
|
135
|
+
if (column.isAction) {
|
136
|
+
return [props, {
|
137
|
+
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
138
|
+
width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
|
139
|
+
|
140
|
+
})
|
141
|
+
}];
|
142
|
+
}
|
143
|
+
|
144
|
+
return [props];
|
145
|
+
};
|
146
|
+
|
147
|
+
hooks.getHeaderProps.push(addHeaderWidth);
|
148
|
+
}
|
149
|
+
};
|
150
|
+
|
151
|
+
hooks.useInstance.push(useStickyHeaderWidth);
|
124
152
|
hooks.useInstance.push(useAttachActionsOnInstance);
|
125
153
|
};
|
126
154
|
|
@@ -22,7 +22,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
|
|
22
22
|
var _tableProps$column;
|
23
23
|
|
24
24
|
return /*#__PURE__*/React.createElement("div", {
|
25
|
-
className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap)),
|
25
|
+
className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll))),
|
26
26
|
title: tableProps.value
|
27
27
|
}, tableProps.value);
|
28
28
|
};
|
@@ -29,9 +29,7 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
29
29
|
var row = _ref2.row;
|
30
30
|
return [props, {
|
31
31
|
style: {
|
32
|
-
|
33
|
-
paddingLeft: "".concat(row.depth === 2 ? marginLeft * (row.depth - 1) + marginLeft - 8 : row.depth > 2 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft - 16 : 0, "px"),
|
34
|
-
maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
|
32
|
+
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
35
33
|
}
|
36
34
|
}];
|
37
35
|
};
|
@@ -45,7 +43,7 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
45
43
|
}) === 0;
|
46
44
|
return [props, {
|
47
45
|
style: {
|
48
|
-
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "
|
46
|
+
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
49
47
|
}
|
50
48
|
}];
|
51
49
|
};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
3
|
|
3
4
|
/*
|
4
5
|
* Licensed Materials - Property of IBM
|
@@ -8,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
9
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
9
10
|
*/
|
10
11
|
// @flow
|
11
|
-
import React from 'react';
|
12
|
+
import React, { useLayoutEffect, useState } from 'react';
|
12
13
|
import cx from 'classnames';
|
13
14
|
import { selectionColumnId } from './common-column-ids';
|
14
15
|
import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
|
@@ -42,6 +43,21 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
|
|
42
43
|
};
|
43
44
|
|
44
45
|
var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
46
|
+
var _useState = useState(window.innerWidth),
|
47
|
+
_useState2 = _slicedToArray(_useState, 2),
|
48
|
+
windowSize = _useState2[0],
|
49
|
+
setWindowSize = _useState2[1];
|
50
|
+
|
51
|
+
useLayoutEffect(function () {
|
52
|
+
function updateSize() {
|
53
|
+
setWindowSize(window.innerWidth);
|
54
|
+
}
|
55
|
+
|
56
|
+
window.addEventListener('resize', updateSize);
|
57
|
+
return function () {
|
58
|
+
return window.removeEventListener('resize', updateSize);
|
59
|
+
};
|
60
|
+
}, []);
|
45
61
|
hooks.getCellProps.push(function (props, data) {
|
46
62
|
var _columns$;
|
47
63
|
|
@@ -54,7 +70,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
|
54
70
|
|
55
71
|
if (column.id === selectionColumnId && DatagridPagination) {
|
56
72
|
return [props, {
|
57
|
-
className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
|
73
|
+
className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
58
74
|
}];
|
59
75
|
}
|
60
76
|
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
4
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
4
5
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
5
6
|
var _excluded = ["onChange"];
|
@@ -16,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
16
17
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
17
18
|
*/
|
18
19
|
// @flow
|
19
|
-
import React from 'react';
|
20
|
+
import React, { useLayoutEffect, useState } from 'react';
|
20
21
|
import cx from 'classnames';
|
21
22
|
import { TableSelectRow } from '@carbon/react';
|
22
23
|
import { SelectAll } from './Datagrid/DatagridSelectAll';
|
@@ -82,6 +83,22 @@ var SelectRow = function SelectRow(datagridState) {
|
|
82
83
|
onRadioSelect = datagridState.onRadioSelect,
|
83
84
|
columns = datagridState.columns,
|
84
85
|
withStickyColumn = datagridState.withStickyColumn;
|
86
|
+
|
87
|
+
var _useState = useState(window.innerWidth),
|
88
|
+
_useState2 = _slicedToArray(_useState, 2),
|
89
|
+
windowSize = _useState2[0],
|
90
|
+
setWindowSize = _useState2[1];
|
91
|
+
|
92
|
+
useLayoutEffect(function () {
|
93
|
+
function updateSize() {
|
94
|
+
setWindowSize(window.innerWidth);
|
95
|
+
}
|
96
|
+
|
97
|
+
window.addEventListener('resize', updateSize);
|
98
|
+
return function () {
|
99
|
+
return window.removeEventListener('resize', updateSize);
|
100
|
+
};
|
101
|
+
}, []);
|
85
102
|
var selectDisabled = isFetching || row.getRowProps().selectDisabled;
|
86
103
|
|
87
104
|
var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
|
@@ -107,7 +124,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
107
124
|
},
|
108
125
|
id: "".concat(tableId, "-").concat(row.index),
|
109
126
|
name: "".concat(tableId, "-").concat(row.index, "-name"),
|
110
|
-
className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
|
127
|
+
className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className, _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
|
111
128
|
ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
|
112
129
|
,
|
113
130
|
disabled: selectDisabled
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
3
|
|
3
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
4
5
|
|
@@ -11,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
11
12
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
12
13
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
13
14
|
*/
|
14
|
-
import { useEffect, useRef } from 'react';
|
15
|
+
import { useEffect, useRef, useLayoutEffect, useState } from 'react';
|
15
16
|
import debounce from 'lodash/debounce';
|
16
17
|
import cx from 'classnames';
|
17
18
|
import { pkg } from '../../settings';
|
@@ -23,8 +24,24 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
|
|
23
24
|
var useStickyColumn = function useStickyColumn(hooks) {
|
24
25
|
var tableBodyRef = useRef();
|
25
26
|
var stickyHeaderCellRef = useRef();
|
26
|
-
|
27
|
-
|
27
|
+
|
28
|
+
var _useState = useState(window.innerWidth),
|
29
|
+
_useState2 = _slicedToArray(_useState, 2),
|
30
|
+
windowSize = _useState2[0],
|
31
|
+
setWindowSize = _useState2[1];
|
32
|
+
|
33
|
+
useLayoutEffect(function () {
|
34
|
+
function updateSize() {
|
35
|
+
setWindowSize(window.innerWidth);
|
36
|
+
}
|
37
|
+
|
38
|
+
window.addEventListener('resize', updateSize);
|
39
|
+
return function () {
|
40
|
+
return window.removeEventListener('resize', updateSize);
|
41
|
+
};
|
42
|
+
}, []);
|
43
|
+
hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
|
44
|
+
hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
|
28
45
|
hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
|
29
46
|
hooks.getHeaderGroupProps.push(function (props) {
|
30
47
|
return [props, {
|
@@ -132,7 +149,7 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
|
|
132
149
|
}];
|
133
150
|
};
|
134
151
|
|
135
|
-
var changeProps = function changeProps(elementName, headerCellRef, props, data) {
|
152
|
+
var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
|
136
153
|
var column = data.column || data.cell.column;
|
137
154
|
|
138
155
|
if (column.sticky === 'right') {
|
@@ -149,7 +166,7 @@ var changeProps = function changeProps(elementName, headerCellRef, props, data)
|
|
149
166
|
var _data$instance, _cx2;
|
150
167
|
|
151
168
|
return [props, _objectSpread({
|
152
|
-
className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows), _cx2))
|
169
|
+
className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
|
153
170
|
}, headerCellRef && {
|
154
171
|
ref: headerCellRef
|
155
172
|
})];
|
@@ -48,6 +48,7 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
48
48
|
}) : null, loading ? /*#__PURE__*/React.createElement(SkeletonText, {
|
49
49
|
className: "".concat(blockClass, "__title-skeleton")
|
50
50
|
}) : isEditable ? /*#__PURE__*/React.createElement(InlineEdit, _extends({
|
51
|
+
v1: true,
|
51
52
|
hideLabel: true,
|
52
53
|
value: text,
|
53
54
|
editDescription: editDescription,
|
@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
5
|
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
|
6
|
-
_excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
|
6
|
+
_excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
7
7
|
|
8
8
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
9
9
|
|
@@ -433,6 +433,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
433
433
|
var label = _ref5.label,
|
434
434
|
kind = _ref5.kind,
|
435
435
|
icon = _ref5.icon,
|
436
|
+
tooltipPosition = _ref5.tooltipPosition,
|
437
|
+
tooltipAlignment = _ref5.tooltipAlignment,
|
436
438
|
leading = _ref5.leading,
|
437
439
|
disabled = _ref5.disabled,
|
438
440
|
className = _ref5.className,
|
@@ -445,8 +447,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
445
447
|
size: "sm",
|
446
448
|
renderIcon: icon,
|
447
449
|
iconDescription: label,
|
448
|
-
tooltipPosition:
|
449
|
-
tooltipAlignment:
|
450
|
+
tooltipPosition: tooltipPosition || 'bottom',
|
451
|
+
tooltipAlignment: tooltipAlignment || 'center',
|
450
452
|
hasIconOnly: !leading,
|
451
453
|
disabled: disabled,
|
452
454
|
className: cx(["".concat(blockClass, "__action-toolbar-button"), className, (_ref6 = {}, _defineProperty(_ref6, "".concat(blockClass, "__action-toolbar-icon-only-button"), icon && !leading), _defineProperty(_ref6, "".concat(blockClass, "__action-toolbar-leading-button"), leading), _ref6)]),
|
@@ -528,14 +530,19 @@ SidePanel.propTypes = {
|
|
528
530
|
leading: PropTypes.bool,
|
529
531
|
icon: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
530
532
|
onClick: PropTypes.func,
|
531
|
-
kind: PropTypes.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
|
533
|
+
kind: PropTypes.oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
|
534
|
+
tooltipAlignment: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
535
|
+
tooltipPosition: PropTypes.oneOf(['start', 'center', 'end'])
|
532
536
|
})),
|
533
537
|
|
534
538
|
/**
|
535
539
|
* The primary actions to be shown in the side panel. Each action is
|
536
540
|
* specified as an object with optional fields: 'label' to supply the button
|
537
541
|
* label, 'kind' to select the button kind (must be 'primary', 'secondary' or
|
538
|
-
* 'ghost'), '
|
542
|
+
* 'ghost'), 'tooltipPosition' to select where the tooltip is placed around
|
543
|
+
* the button (must be 'top', 'right', 'bottom', or 'left'), 'tooltipAlignment'
|
544
|
+
* to select how the tooltip is aligned with the button (must be 'start',
|
545
|
+
* 'center', or 'end', 'loading' to display a loading indicator, and 'onClick' to
|
539
546
|
* receive notifications when the button is clicked. Additional fields in the
|
540
547
|
* object will be passed to the Button component, and these can include
|
541
548
|
* 'disabled', 'ref', 'className', and any other Button props. Any other
|
@@ -546,6 +553,8 @@ SidePanel.propTypes = {
|
|
546
553
|
*/
|
547
554
|
actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
|
548
555
|
kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
556
|
+
tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
557
|
+
tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
|
549
558
|
label: PropTypes.string,
|
550
559
|
loading: PropTypes.bool,
|
551
560
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
9
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
10
10
|
|
11
11
|
/**
|
12
|
-
* Copyright IBM Corp. 2020,
|
12
|
+
* Copyright IBM Corp. 2020, 2023
|
13
13
|
*
|
14
14
|
* This source code is licensed under the Apache-2.0 license found in the
|
15
15
|
* LICENSE file in the root directory of this source tree.
|
@@ -24,7 +24,7 @@ import cx from 'classnames';
|
|
24
24
|
import { pkg } from '../../settings';
|
25
25
|
import pconsole from '../../global/js/utils/pconsole'; // Carbon and package components we use.
|
26
26
|
|
27
|
-
import { Button, ComposedModal, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
|
27
|
+
import { Button, ComposedModal, Layer, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
|
28
28
|
import { ActionSet } from '../ActionSet';
|
29
29
|
import { Wrap } from '../../global/js/utils/Wrap'; // The block part of our conventional BEM class names (bc__E--M).
|
30
30
|
|
@@ -240,11 +240,13 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
240
240
|
}, influencer), /*#__PURE__*/React.createElement(Wrap, {
|
241
241
|
className: "".concat(bc, "__right")
|
242
242
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
243
|
+
className: "".concat(bc, "__main"),
|
243
244
|
alwaysRender: includeActions,
|
244
|
-
|
245
|
+
element: Layer
|
245
246
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
247
|
+
className: "".concat(bc, "__content"),
|
246
248
|
alwaysRender: influencer && influencerPosition === 'right',
|
247
|
-
|
249
|
+
element: Layer
|
248
250
|
}, children), /*#__PURE__*/React.createElement(Wrap, {
|
249
251
|
className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
|
250
252
|
neverRender: influencerPosition !== 'right'
|
@@ -83,13 +83,13 @@ CardFooter.propTypes = {
|
|
83
83
|
onPrimaryButtonClick: _propTypes.default.func,
|
84
84
|
onSecondaryButtonClick: _propTypes.default.func,
|
85
85
|
primaryButtonHref: _propTypes.default.string,
|
86
|
-
primaryButtonIcon: _propTypes.default.
|
86
|
+
primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
87
87
|
primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
|
88
88
|
primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
89
89
|
primaryButtonText: _propTypes.default.string,
|
90
90
|
productive: _propTypes.default.bool,
|
91
91
|
secondaryButtonHref: _propTypes.default.string,
|
92
|
-
secondaryButtonIcon: _propTypes.default.
|
92
|
+
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
93
93
|
secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
|
94
94
|
secondaryButtonText: _propTypes.default.string
|
95
95
|
};
|
@@ -57,30 +57,61 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
57
57
|
return size;
|
58
58
|
};
|
59
59
|
|
60
|
+
var hoverHandler = function hoverHandler(event) {
|
61
|
+
var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
|
62
|
+
|
63
|
+
var subRowCount = getVisibleNestedRowCount(row);
|
64
|
+
var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
|
65
|
+
var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
|
66
|
+
hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
67
|
+
var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
|
68
|
+
var rowSizeValue = rowSize || 'lg';
|
69
|
+
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
|
70
|
+
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
|
71
|
+
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
|
72
|
+
};
|
73
|
+
|
74
|
+
var focusRemover = function focusRemover() {
|
75
|
+
var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
|
76
|
+
elements.forEach(function (el) {
|
77
|
+
el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
78
|
+
});
|
79
|
+
};
|
80
|
+
|
60
81
|
return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
|
61
82
|
className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
|
62
83
|
}, row.getRowProps(), {
|
63
84
|
key: row.id,
|
64
85
|
onMouseEnter: function onMouseEnter(event) {
|
65
|
-
var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
|
66
|
-
|
67
86
|
if (!withNestedRows) {
|
68
87
|
return;
|
69
88
|
}
|
70
89
|
|
71
|
-
|
72
|
-
var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
|
73
|
-
var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
|
74
|
-
hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
75
|
-
var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
|
76
|
-
var rowSizeValue = rowSize || 'lg';
|
77
|
-
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
|
78
|
-
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
|
79
|
-
hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
|
90
|
+
hoverHandler(event);
|
80
91
|
},
|
81
92
|
onMouseLeave: function onMouseLeave(event) {
|
82
93
|
var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
|
83
94
|
hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
95
|
+
},
|
96
|
+
onFocus: function onFocus(event) {
|
97
|
+
if (!withNestedRows) {
|
98
|
+
return;
|
99
|
+
}
|
100
|
+
|
101
|
+
hoverHandler(event);
|
102
|
+
},
|
103
|
+
onBlur: function onBlur() {
|
104
|
+
focusRemover();
|
105
|
+
},
|
106
|
+
onKeyUp: function onKeyUp(event) {
|
107
|
+
if (!withNestedRows) {
|
108
|
+
return;
|
109
|
+
}
|
110
|
+
|
111
|
+
if (event.key === 'Enter' || event.key === 'Space') {
|
112
|
+
focusRemover();
|
113
|
+
hoverHandler(event);
|
114
|
+
}
|
84
115
|
}
|
85
116
|
}), row.cells.map(function (cell, index) {
|
86
117
|
var cellProps = cell.getCellProps();
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -13,7 +15,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
13
15
|
|
14
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
17
|
|
16
|
-
var
|
18
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
19
|
+
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
17
21
|
|
18
22
|
var _react2 = require("@carbon/react");
|
19
23
|
|
@@ -22,11 +26,31 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
22
26
|
var _settings = require("../../../settings");
|
23
27
|
|
24
28
|
var _excluded = ["onChange"];
|
29
|
+
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
31
|
+
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
33
|
+
|
25
34
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
26
35
|
|
27
36
|
var SelectAll = function SelectAll(datagridState) {
|
28
37
|
var _columns$;
|
29
38
|
|
39
|
+
var _useState = (0, _react.useState)(window.innerWidth),
|
40
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
41
|
+
windowSize = _useState2[0],
|
42
|
+
setWindowSize = _useState2[1];
|
43
|
+
|
44
|
+
(0, _react.useLayoutEffect)(function () {
|
45
|
+
function updateSize() {
|
46
|
+
setWindowSize(window.innerWidth);
|
47
|
+
}
|
48
|
+
|
49
|
+
window.addEventListener('resize', updateSize);
|
50
|
+
return function () {
|
51
|
+
return window.removeEventListener('resize', updateSize);
|
52
|
+
};
|
53
|
+
}, []);
|
30
54
|
var isFetching = datagridState.isFetching,
|
31
55
|
getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
|
32
56
|
getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
|
@@ -40,7 +64,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
40
64
|
|
41
65
|
if (hideSelectAll || radio) {
|
42
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
43
|
-
className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
|
67
|
+
className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
44
68
|
});
|
45
69
|
}
|
46
70
|
|
@@ -51,7 +75,7 @@ var SelectAll = function SelectAll(datagridState) {
|
|
51
75
|
selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
|
52
76
|
|
53
77
|
return /*#__PURE__*/_react.default.createElement("div", {
|
54
|
-
className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
|
78
|
+
className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
55
79
|
}, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
|
56
80
|
name: "".concat(tableId, "-select-all-checkbox-name"),
|
57
81
|
onSelect: onChange,
|
@@ -67,6 +67,22 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
67
67
|
}
|
68
68
|
}, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
|
69
69
|
|
70
|
+
var _useState3 = (0, _react.useState)(window.innerWidth),
|
71
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
72
|
+
windowSize = _useState4[0],
|
73
|
+
setWindowSize = _useState4[1];
|
74
|
+
|
75
|
+
(0, _react.useLayoutEffect)(function () {
|
76
|
+
function updateSize() {
|
77
|
+
setWindowSize(window.innerWidth);
|
78
|
+
}
|
79
|
+
|
80
|
+
window.addEventListener('resize', updateSize);
|
81
|
+
return function () {
|
82
|
+
return window.removeEventListener('resize', updateSize);
|
83
|
+
};
|
84
|
+
}, []);
|
85
|
+
|
70
86
|
var _ref2 = selectAllToggle || {},
|
71
87
|
onSelectAllRows = _ref2.onSelectAllRows,
|
72
88
|
labels = _ref2.labels;
|
@@ -87,7 +103,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
|
|
87
103
|
return /*#__PURE__*/_react.default.createElement("th", {
|
88
104
|
role: "columnheader",
|
89
105
|
scope: "col",
|
90
|
-
className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
|
106
|
+
className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
91
107
|
}, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({}, selectProps, {
|
92
108
|
name: "".concat(tableId, "-select-all-checkbox-name"),
|
93
109
|
onClick: function onClick(e) {
|
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -79,7 +79,9 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
79
79
|
|
80
80
|
var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
|
81
81
|
.filter(function (colDef) {
|
82
|
-
return !!colDef.Header.props &&
|
82
|
+
return !!colDef.Header.props && !!colDef.Header.props.title;
|
83
|
+
}).filter(function (colDef) {
|
84
|
+
return !colDef.isAction;
|
83
85
|
}) // only sort the hidden column to the end when modal reopen
|
84
86
|
.sort(function (defA, defB) {
|
85
87
|
var isVisibleA = (0, _common.isColumnVisible)(defA);
|
@@ -23,6 +23,11 @@ var _settings = require("../../settings");
|
|
23
23
|
|
24
24
|
var _excluded = ["id", "itemText", "onClick", "icon"],
|
25
25
|
_excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
|
26
|
+
|
27
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
28
|
+
|
29
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
30
|
+
|
26
31
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
27
32
|
|
28
33
|
var useActionsColumn = function useActionsColumn(hooks) {
|
@@ -115,7 +120,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
115
120
|
})))),
|
116
121
|
className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
|
117
122
|
style: {
|
118
|
-
width: 96
|
123
|
+
width: rowActions.length > 2 ? 48 : 96
|
119
124
|
}
|
120
125
|
}];
|
121
126
|
}
|
@@ -127,6 +132,30 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
127
132
|
}
|
128
133
|
};
|
129
134
|
|
135
|
+
var useStickyHeaderWidth = function useStickyHeaderWidth(instance) {
|
136
|
+
var rowActions = instance.rowActions;
|
137
|
+
|
138
|
+
if (rowActions && Array.isArray(rowActions)) {
|
139
|
+
var addHeaderWidth = function addHeaderWidth(props, cellData) {
|
140
|
+
var column = cellData.column;
|
141
|
+
|
142
|
+
if (column.isAction) {
|
143
|
+
return [props, {
|
144
|
+
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
145
|
+
width: rowActions.length > 2 ? 48 : 96 // set header width based on action length
|
146
|
+
|
147
|
+
})
|
148
|
+
}];
|
149
|
+
}
|
150
|
+
|
151
|
+
return [props];
|
152
|
+
};
|
153
|
+
|
154
|
+
hooks.getHeaderProps.push(addHeaderWidth);
|
155
|
+
}
|
156
|
+
};
|
157
|
+
|
158
|
+
hooks.useInstance.push(useStickyHeaderWidth);
|
130
159
|
hooks.useInstance.push(useAttachActionsOnInstance);
|
131
160
|
};
|
132
161
|
|
@@ -28,7 +28,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
|
|
28
28
|
var _tableProps$column;
|
29
29
|
|
30
30
|
return /*#__PURE__*/_react.default.createElement("div", {
|
31
|
-
className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), (_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap)),
|
31
|
+
className: (0, _classnames.default)("".concat(blockClass, "__defaultStringRenderer"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll))),
|
32
32
|
title: tableProps.value
|
33
33
|
}, tableProps.value);
|
34
34
|
};
|
@@ -41,9 +41,7 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
41
41
|
var row = _ref2.row;
|
42
42
|
return [props, {
|
43
43
|
style: {
|
44
|
-
|
45
|
-
paddingLeft: "".concat(row.depth === 2 ? marginLeft * (row.depth - 1) + marginLeft - 8 : row.depth > 2 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft - 16 : 0, "px"),
|
46
|
-
maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
|
44
|
+
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
47
45
|
}
|
48
46
|
}];
|
49
47
|
};
|
@@ -57,7 +55,7 @@ var useNestedRows = function useNestedRows(hooks) {
|
|
57
55
|
}) === 0;
|
58
56
|
return [props, {
|
59
57
|
style: {
|
60
|
-
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "
|
58
|
+
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
61
59
|
}
|
62
60
|
}];
|
63
61
|
};
|