@carbon/ibm-products 2.17.1 → 2.17.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.
- package/css/index-full-carbon.css +521 -184
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +66 -7
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +72 -7
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +119 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/CreateSidePanel/CreateSidePanel.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +13 -3
- package/es/components/Datagrid/useExpandedRow.js +3 -6
- package/es/components/Datagrid/useFocusRowExpander.js +40 -0
- package/es/components/Datagrid/useNestedRowExpander.js +9 -0
- package/es/components/Datagrid/useNestedRows.js +1 -5
- package/es/components/Datagrid/useRowExpander.js +9 -0
- package/es/components/Datagrid/useSelectRows.js +9 -2
- package/es/components/EditSidePanel/EditSidePanel.js +8 -2
- package/es/components/SidePanel/SidePanel.js +39 -19
- package/es/global/js/hooks/useCreateComponentStepChange.js +1 -1
- package/es/global/js/package-settings.js +0 -2
- package/lib/components/CreateSidePanel/CreateSidePanel.js +7 -1
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +13 -3
- package/lib/components/Datagrid/useExpandedRow.js +2 -5
- package/lib/components/Datagrid/useFocusRowExpander.js +45 -0
- package/lib/components/Datagrid/useNestedRowExpander.js +9 -0
- package/lib/components/Datagrid/useNestedRows.js +1 -5
- package/lib/components/Datagrid/useRowExpander.js +9 -0
- package/lib/components/Datagrid/useSelectRows.js +9 -2
- package/lib/components/EditSidePanel/EditSidePanel.js +8 -2
- package/lib/components/SidePanel/SidePanel.js +38 -18
- package/lib/global/js/hooks/useCreateComponentStepChange.js +1 -1
- package/lib/global/js/package-settings.js +0 -2
- package/package.json +5 -5
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +21 -0
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -0
- package/scss/components/SidePanel/_side-panel.scss +22 -6
@@ -6,15 +6,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
7
7
|
*/
|
8
8
|
|
9
|
-
import { useEffect } from 'react';
|
10
|
-
import { pkg } from '../../settings';
|
11
9
|
import cx from 'classnames';
|
10
|
+
import { pkg } from '../../settings';
|
12
11
|
import useNestedRowExpander from './useNestedRowExpander';
|
13
12
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
14
13
|
var useNestedRows = function useNestedRows(hooks) {
|
15
|
-
useEffect(function () {
|
16
|
-
pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
|
17
|
-
}, []);
|
18
14
|
useNestedRowExpander(hooks);
|
19
15
|
var marginLeft = 24;
|
20
16
|
var getRowProps = function getRowProps(props, _ref) {
|
@@ -15,12 +15,20 @@ import React, { useRef } from 'react';
|
|
15
15
|
import { ChevronDown, ChevronUp } from '@carbon/react/icons';
|
16
16
|
import { pkg, carbon } from '../../settings';
|
17
17
|
import cx from 'classnames';
|
18
|
+
import { useFocusRowExpander } from './useFocusRowExpander';
|
18
19
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
19
20
|
var useRowExpander = function useRowExpander(hooks) {
|
20
21
|
var tempState = useRef();
|
22
|
+
var lastExpandedRowIndex = useRef();
|
21
23
|
var useInstance = function useInstance(instance) {
|
22
24
|
tempState.current = instance;
|
23
25
|
};
|
26
|
+
useFocusRowExpander({
|
27
|
+
instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
|
28
|
+
lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
|
29
|
+
blockClass: blockClass,
|
30
|
+
activeElement: document.activeElement
|
31
|
+
});
|
24
32
|
var visibleColumns = function visibleColumns(columns) {
|
25
33
|
var expanderColumn = {
|
26
34
|
id: 'expander',
|
@@ -31,6 +39,7 @@ var useRowExpander = function useRowExpander(hooks) {
|
|
31
39
|
// Prevents `onRowClick` from being called if `useOnRowClick` is included
|
32
40
|
event.stopPropagation();
|
33
41
|
row.toggleRowExpanded();
|
42
|
+
lastExpandedRowIndex.current = row.id;
|
34
43
|
}
|
35
44
|
});
|
36
45
|
var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
|
@@ -42,7 +42,14 @@ var useSelectRows = function useSelectRows(hooks) {
|
|
42
42
|
});
|
43
43
|
});
|
44
44
|
hooks.visibleColumns.push(function (columns) {
|
45
|
-
|
45
|
+
// Ensures that the first column is the row expander in the
|
46
|
+
// case of selected rows and expandable rows being used together
|
47
|
+
var newColOrder = _toConsumableArray(columns);
|
48
|
+
var expanderColumnIndex = newColOrder.findIndex(function (col) {
|
49
|
+
return col.id === 'expander';
|
50
|
+
});
|
51
|
+
var expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
|
52
|
+
return [].concat(_toConsumableArray(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), [{
|
46
53
|
id: selectionColumnId,
|
47
54
|
Header: function Header(gridState) {
|
48
55
|
return /*#__PURE__*/React.createElement(SelectAll, gridState);
|
@@ -50,7 +57,7 @@ var useSelectRows = function useSelectRows(hooks) {
|
|
50
57
|
Cell: function Cell(gridState) {
|
51
58
|
return /*#__PURE__*/React.createElement(SelectRow, gridState);
|
52
59
|
}
|
53
|
-
}]
|
60
|
+
}], _toConsumableArray(newColOrder));
|
54
61
|
});
|
55
62
|
};
|
56
63
|
var useHighlightSelection = function useHighlightSelection(hooks) {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
|
4
|
+
var _excluded = ["children", "className", "disableSubmit", "id", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
7
7
|
/**
|
@@ -45,6 +45,7 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
45
45
|
var children = _ref.children,
|
46
46
|
className = _ref.className,
|
47
47
|
disableSubmit = _ref.disableSubmit,
|
48
|
+
id = _ref.id,
|
48
49
|
formTitle = _ref.formTitle,
|
49
50
|
formDescription = _ref.formDescription,
|
50
51
|
onRequestClose = _ref.onRequestClose,
|
@@ -84,7 +85,8 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
84
85
|
onRequestClose: onRequestClose,
|
85
86
|
title: title,
|
86
87
|
subtitle: subtitle,
|
87
|
-
selectorPrimaryFocus: selectorPrimaryFocus
|
88
|
+
selectorPrimaryFocus: selectorPrimaryFocus,
|
89
|
+
id: id
|
88
90
|
}, getDevtoolsProps(componentName)), {
|
89
91
|
placement: placement,
|
90
92
|
slideIn: slideIn,
|
@@ -136,6 +138,10 @@ EditSidePanel.propTypes = {
|
|
136
138
|
* Specifies a required field that provides a title for a form
|
137
139
|
*/
|
138
140
|
formTitle: PropTypes.node.isRequired,
|
141
|
+
/**
|
142
|
+
* Unique identifier
|
143
|
+
*/
|
144
|
+
id: PropTypes.string,
|
139
145
|
/**
|
140
146
|
* Specifies an optional handler which is called when the CreateSidePanel
|
141
147
|
* is closed.
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
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
|
-
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"],
|
5
|
+
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
|
6
6
|
_excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
7
7
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
8
8
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -14,7 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
14
14
|
*/
|
15
15
|
|
16
16
|
// Import portions of React that are needed.
|
17
|
-
import React, { useState, useEffect, useRef } from 'react';
|
17
|
+
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
18
18
|
import { motion, AnimatePresence } from 'framer-motion';
|
19
19
|
|
20
20
|
// Other standard imports.
|
@@ -65,6 +65,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
65
65
|
condensedActions = _ref.condensedActions,
|
66
66
|
_ref$currentStep = _ref.currentStep,
|
67
67
|
currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
|
68
|
+
_ref$id = _ref.id,
|
69
|
+
id = _ref$id === void 0 ? blockClass : _ref$id,
|
68
70
|
includeOverlay = _ref.includeOverlay,
|
69
71
|
labelText = _ref.labelText,
|
70
72
|
_ref$navigationBackIc = _ref.navigationBackIconDescription,
|
@@ -81,6 +83,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
81
83
|
_ref$size = _ref.size,
|
82
84
|
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
83
85
|
slideIn = _ref.slideIn,
|
86
|
+
slug = _ref.slug,
|
84
87
|
subtitle = _ref.subtitle,
|
85
88
|
title = _ref.title,
|
86
89
|
rest = _objectWithoutProperties(_ref, _excluded);
|
@@ -105,6 +108,10 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
105
108
|
var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
|
106
109
|
matches: true
|
107
110
|
};
|
111
|
+
var getActionsContainerElement = useCallback(function () {
|
112
|
+
var sidePanelOuter = document.querySelector("#".concat(id));
|
113
|
+
return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
|
114
|
+
}, [id]);
|
108
115
|
|
109
116
|
// scroll panel to top going between steps
|
110
117
|
useEffect(function () {
|
@@ -112,7 +119,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
112
119
|
if (panelRef && panelRef.current) {
|
113
120
|
var _document$querySelect;
|
114
121
|
var scrollableSection = panelRef.current.querySelector(".".concat(blockClass, "__inner-content"));
|
115
|
-
var sidePanelOuter = document.querySelector("#".concat(
|
122
|
+
var sidePanelOuter = document.querySelector("#".concat(id));
|
116
123
|
var initialTitleHeight = (_document$querySelect = document.querySelector(".".concat(blockClass, "__title-container"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetHeight;
|
117
124
|
scrollableSection.scrollTop = 0;
|
118
125
|
// The size of the panel has changed while it is still opened
|
@@ -124,7 +131,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
124
131
|
sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 || _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
|
125
132
|
}
|
126
133
|
}
|
127
|
-
}, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]);
|
134
|
+
}, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
|
128
135
|
|
129
136
|
// set initial focus when side panel opens
|
130
137
|
useEffect(function () {
|
@@ -148,13 +155,13 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
148
155
|
useEffect(function () {
|
149
156
|
if (open && actions && actions.length && animationComplete) {
|
150
157
|
var _sidePanelOuter$style2;
|
151
|
-
var sidePanelOuter = document.querySelector("#".concat(
|
158
|
+
var sidePanelOuter = document.querySelector("#".concat(id));
|
152
159
|
var actionsContainer = getActionsContainerElement();
|
153
160
|
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
154
161
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
155
162
|
sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 || _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
156
163
|
}
|
157
|
-
}, [actions, condensedActions, open, animationComplete]);
|
164
|
+
}, [actions, condensedActions, open, animationComplete, id, getActionsContainerElement]);
|
158
165
|
|
159
166
|
// Add console warning if labelText is provided without a title.
|
160
167
|
// This combination is not allowed.
|
@@ -169,23 +176,19 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
169
176
|
var _sidePanelOuter$style3;
|
170
177
|
var height = _ref2.height;
|
171
178
|
setPanelHeight(height);
|
172
|
-
var sidePanelOuter = document.querySelector("#".concat(
|
179
|
+
var sidePanelOuter = document.querySelector("#".concat(id));
|
173
180
|
var actionsContainer = getActionsContainerElement();
|
174
181
|
var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
|
175
182
|
actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
|
176
183
|
sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 || _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
|
177
184
|
};
|
178
|
-
var getActionsContainerElement = function getActionsContainerElement() {
|
179
|
-
var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
|
180
|
-
return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
|
181
|
-
};
|
182
185
|
|
183
186
|
// Title and subtitle scroll animation
|
184
187
|
useEffect(function () {
|
185
188
|
if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
|
186
189
|
var _document$querySelect2, _document$querySelect3, _document$querySelect4;
|
187
|
-
var sidePanelOuter = document.querySelector("#".concat(
|
188
|
-
var sidePanelScrollArea = document.querySelector("#".concat(
|
190
|
+
var sidePanelOuter = document.querySelector("#".concat(id));
|
191
|
+
var sidePanelScrollArea = document.querySelector("#".concat(id, " .").concat(blockClass, "__inner-content"));
|
189
192
|
var sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-text"));
|
190
193
|
var sidePanelCollapsedTitleElement = document.querySelector(".".concat(blockClass, "__collapsed-title-text"));
|
191
194
|
var sidePanelSubtitleElement = document.querySelector(".".concat("".concat(blockClass, "__subtitle-text")));
|
@@ -260,7 +263,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
260
263
|
});
|
261
264
|
}
|
262
265
|
if (open && !animateTitle) {
|
263
|
-
var _sidePanelOuter = document.querySelector("#".concat(
|
266
|
+
var _sidePanelOuter = document.querySelector("#".concat(id));
|
264
267
|
var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
|
265
268
|
var _sidePanelSubtitleElement = document.querySelector(".".concat(blockClass, "__subtitle-text"));
|
266
269
|
var actionToolbarElement = document.querySelector(".".concat(blockClass, "__action-toolbar"));
|
@@ -274,7 +277,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
274
277
|
_sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
|
275
278
|
_sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
|
276
279
|
}
|
277
|
-
}, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]);
|
280
|
+
}, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches, id]);
|
278
281
|
|
279
282
|
// click outside functionality if `includeOverlay` prop is set
|
280
283
|
useEffect(function () {
|
@@ -371,9 +374,16 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
371
374
|
}
|
372
375
|
};
|
373
376
|
var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
|
374
|
-
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
|
377
|
+
var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _defineProperty(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
|
375
378
|
var renderHeader = function renderHeader() {
|
376
379
|
var _cx, _cx2;
|
380
|
+
var normalizedSlug;
|
381
|
+
if (slug) {
|
382
|
+
normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
|
383
|
+
// slug size is sm unless actions and size > md
|
384
|
+
size: actions.length && /l/.test(size) ? 'md' : 'sm'
|
385
|
+
});
|
386
|
+
}
|
377
387
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
378
388
|
className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
|
379
389
|
}, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
|
@@ -391,7 +401,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
391
401
|
onClick: onNavigationBack
|
392
402
|
}), title && title.length && labelText && labelText.length && /*#__PURE__*/React.createElement("p", {
|
393
403
|
className: "".concat(blockClass, "__label-text")
|
394
|
-
}, labelText), title && title.length && renderTitle()), /*#__PURE__*/React.createElement(
|
404
|
+
}, labelText), title && title.length && renderTitle()), /*#__PURE__*/React.createElement("div", {
|
405
|
+
className: "".concat(blockClass, "__slug-and-close")
|
406
|
+
}, normalizedSlug, /*#__PURE__*/React.createElement(Button, {
|
395
407
|
"aria-label": closeIconDescription,
|
396
408
|
kind: "ghost",
|
397
409
|
size: "sm",
|
@@ -404,7 +416,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
404
416
|
className: "".concat(blockClass, "__close-button"),
|
405
417
|
onClick: onRequestClose,
|
406
418
|
ref: sidePanelCloseRef
|
407
|
-
}), subtitle && /*#__PURE__*/React.createElement("p", {
|
419
|
+
})), subtitle && /*#__PURE__*/React.createElement("p", {
|
408
420
|
className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
|
409
421
|
}, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
|
410
422
|
className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
|
@@ -448,7 +460,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
448
460
|
var contentRef = ref || sidePanelRef;
|
449
461
|
useResizeObserver(contentRef, handleResize);
|
450
462
|
return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
|
451
|
-
id:
|
463
|
+
id: id,
|
452
464
|
className: mainPanelClassNames,
|
453
465
|
onBlur: handleBlur,
|
454
466
|
ref: contentRef,
|
@@ -556,6 +568,10 @@ SidePanel.propTypes = {
|
|
556
568
|
* Sets the current step of the side panel
|
557
569
|
*/
|
558
570
|
currentStep: PropTypes.number,
|
571
|
+
/**
|
572
|
+
* Unique identifier
|
573
|
+
*/
|
574
|
+
id: PropTypes.string,
|
559
575
|
/**
|
560
576
|
* Determines whether the side panel should render with an overlay
|
561
577
|
*/
|
@@ -615,6 +631,10 @@ SidePanel.propTypes = {
|
|
615
631
|
* Determines if this panel slides in
|
616
632
|
*/
|
617
633
|
slideIn: PropTypes.bool,
|
634
|
+
/**
|
635
|
+
* Provide a `Slug` component to be rendered inside the `SidePanel` component
|
636
|
+
*/
|
637
|
+
slug: PropTypes.node,
|
618
638
|
/**
|
619
639
|
* Sets the subtitle text
|
620
640
|
*/
|
@@ -66,7 +66,7 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
66
66
|
useEffect(function () {
|
67
67
|
var onUnmount = function onUnmount() {
|
68
68
|
if (componentName !== 'CreateFullPage') {
|
69
|
-
setCurrentStep(
|
69
|
+
setCurrentStep(1);
|
70
70
|
}
|
71
71
|
setIsSubmitting(false);
|
72
72
|
onClose();
|
@@ -80,8 +80,6 @@ var defaults = {
|
|
80
80
|
'default-portal-target-body': true,
|
81
81
|
'Datagrid.useInlineEdit': false,
|
82
82
|
'Datagrid.useEditableCell': false,
|
83
|
-
'Datagrid.useExpandedRow': false,
|
84
|
-
'Datagrid.useNestedRows': false,
|
85
83
|
'Datagrid.useFiltering': false,
|
86
84
|
'Datagrid.useCustomizeColumns': false,
|
87
85
|
'ExampleComponent.secondaryIcon': false,
|
@@ -16,7 +16,7 @@ var _devtools = require("../../global/js/utils/devtools");
|
|
16
16
|
var _react2 = require("@carbon/react");
|
17
17
|
var _SidePanel = require("../SidePanel");
|
18
18
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
19
|
-
var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
|
19
|
+
var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "id", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
|
20
20
|
/**
|
21
21
|
* Copyright IBM Corp. 2021, 2021
|
22
22
|
*
|
@@ -43,6 +43,7 @@ var CreateSidePanel = exports.CreateSidePanel = /*#__PURE__*/_react.default.forw
|
|
43
43
|
disableSubmit = _ref.disableSubmit,
|
44
44
|
formTitle = _ref.formTitle,
|
45
45
|
formDescription = _ref.formDescription,
|
46
|
+
id = _ref.id,
|
46
47
|
onRequestClose = _ref.onRequestClose,
|
47
48
|
onRequestSubmit = _ref.onRequestSubmit,
|
48
49
|
open = _ref.open,
|
@@ -69,6 +70,7 @@ var CreateSidePanel = exports.CreateSidePanel = /*#__PURE__*/_react.default.forw
|
|
69
70
|
}];
|
70
71
|
var formTitleId = (0, _uuidv.default)();
|
71
72
|
return selectorPageContent && /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
|
73
|
+
id: id,
|
72
74
|
open: open,
|
73
75
|
ref: ref,
|
74
76
|
selectorPageContent: selectorPageContent,
|
@@ -121,6 +123,10 @@ CreateSidePanel.propTypes = {
|
|
121
123
|
* Specifies a required field that provides a title for a form
|
122
124
|
*/
|
123
125
|
formTitle: _propTypes.default.node.isRequired,
|
126
|
+
/**
|
127
|
+
* Unique identifier
|
128
|
+
*/
|
129
|
+
id: _propTypes.default.string,
|
124
130
|
/**
|
125
131
|
* Specifies an optional handler which is called when the CreateSidePanel
|
126
132
|
* is closed.
|
@@ -41,12 +41,14 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
|
|
41
41
|
onMouseLeave: function onMouseLeave(event) {
|
42
42
|
return toggleParentHoverClass(event);
|
43
43
|
}
|
44
|
+
}, /*#__PURE__*/_react.default.createElement("td", {
|
45
|
+
className: "".concat(blockClass, "__expanded-row-cell-wrapper")
|
44
46
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
45
47
|
className: "".concat(blockClass, "__expanded-row-content"),
|
46
48
|
style: {
|
47
49
|
height: expandedContentHeight && expandedContentHeight
|
48
50
|
}
|
49
|
-
}, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState)));
|
51
|
+
}, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState))));
|
50
52
|
};
|
51
53
|
};
|
52
54
|
var _default = exports.default = DatagridExpandedRow;
|
@@ -38,7 +38,9 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
38
38
|
rowSize = datagridState.rowSize,
|
39
39
|
withNestedRows = datagridState.withNestedRows,
|
40
40
|
prepareRow = datagridState.prepareRow,
|
41
|
-
key = datagridState.key
|
41
|
+
key = datagridState.key,
|
42
|
+
tableId = datagridState.tableId,
|
43
|
+
withExpandedRows = datagridState.withExpandedRows;
|
42
44
|
var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
|
43
45
|
var isExpanded = _ref.isExpanded,
|
44
46
|
subRows = _ref.subRows;
|
@@ -67,7 +69,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
67
69
|
hoverRow === null || hoverRow === void 0 || (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 || _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
|
68
70
|
};
|
69
71
|
var focusRemover = function focusRemover() {
|
70
|
-
var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
|
72
|
+
var elements = document.querySelectorAll("#".concat(tableId, " .").concat(blockClass, "__carbon-row-expanded"));
|
71
73
|
elements.forEach(function (el) {
|
72
74
|
el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
|
73
75
|
});
|
@@ -96,6 +98,14 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
96
98
|
}
|
97
99
|
};
|
98
100
|
var rowClassNames = (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));
|
101
|
+
var setAdditionalRowProps = function setAdditionalRowProps() {
|
102
|
+
if (withNestedRows || withExpandedRows) {
|
103
|
+
return {
|
104
|
+
'data-nested-row-id': row.id
|
105
|
+
};
|
106
|
+
}
|
107
|
+
return {};
|
108
|
+
};
|
99
109
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
100
110
|
key: key
|
101
111
|
}, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
|
@@ -107,7 +117,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
107
117
|
onFocus: hoverHandler,
|
108
118
|
onBlur: focusRemover,
|
109
119
|
onKeyUp: handleOnKeyUp
|
110
|
-
}), row.cells.map(function (cell, index) {
|
120
|
+
}, setAdditionalRowProps()), row.cells.map(function (cell, index) {
|
111
121
|
var _cell$column;
|
112
122
|
var cellProps = cell.getCellProps();
|
113
123
|
var children = cellProps.children,
|
@@ -8,7 +8,6 @@ exports.default = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
10
|
var _react = require("react");
|
11
|
-
var _settings = require("../../settings");
|
12
11
|
var _DatagridExpandedRow = _interopRequireDefault(require("./Datagrid/DatagridExpandedRow"));
|
13
12
|
var _useRowExpander = _interopRequireDefault(require("./useRowExpander"));
|
14
13
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -19,9 +18,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
19
18
|
* LICENSE file in the root directory of this source tree.
|
20
19
|
*/
|
21
20
|
var useExpandedRow = function useExpandedRow(hooks) {
|
22
|
-
(0, _react.useEffect)(function () {
|
23
|
-
_settings.pkg.checkReportFeatureEnabled('Datagrid.useExpandedRow');
|
24
|
-
}, []);
|
25
21
|
(0, _useRowExpander.default)(hooks);
|
26
22
|
var useInstance = function useInstance(instance) {
|
27
23
|
var rows = instance.rows,
|
@@ -43,7 +39,8 @@ var useExpandedRow = function useExpandedRow(hooks) {
|
|
43
39
|
});
|
44
40
|
Object.assign(instance, {
|
45
41
|
rows: rowsWithExpand,
|
46
|
-
setExpandedRowHeight: setExpandedRowHeight
|
42
|
+
setExpandedRowHeight: setExpandedRowHeight,
|
43
|
+
withExpandedRows: true
|
47
44
|
});
|
48
45
|
};
|
49
46
|
hooks.useInstance.push(useInstance);
|
@@ -0,0 +1,45 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useFocusRowExpander = void 0;
|
7
|
+
var _react = require("react");
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2023, 2023
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*/
|
14
|
+
|
15
|
+
// Focuses the row expander after a nested/expandable row state change.
|
16
|
+
// We have to add this workaround because react-table is re-rendering the entire row
|
17
|
+
// which removes the focus from the expander and interrupts the keyboard navigation
|
18
|
+
// flow.
|
19
|
+
var useFocusRowExpander = exports.useFocusRowExpander = function useFocusRowExpander(_ref) {
|
20
|
+
var instance = _ref.instance,
|
21
|
+
_ref$lastExpandedRowI = _ref.lastExpandedRowIndex,
|
22
|
+
lastExpandedRowIndex = _ref$lastExpandedRowI === void 0 ? 0 : _ref$lastExpandedRowI,
|
23
|
+
blockClass = _ref.blockClass,
|
24
|
+
activeElement = _ref.activeElement;
|
25
|
+
(0, _react.useEffect)(function () {
|
26
|
+
// We need to return at this point so that the focus is not stolen from
|
27
|
+
// other interactive elements in the Datagrid
|
28
|
+
if (!activeElement.classList.contains("".concat(blockClass, "__row-expander"))) {
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
var tableId = instance === null || instance === void 0 ? void 0 : instance.tableId;
|
32
|
+
var rowElements = document.querySelectorAll("#".concat(tableId, " tbody tr"));
|
33
|
+
var rowElementsArray = Array.from(rowElements);
|
34
|
+
var activeRow = rowElementsArray.filter(function (r) {
|
35
|
+
if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
|
36
|
+
return r;
|
37
|
+
}
|
38
|
+
return null;
|
39
|
+
});
|
40
|
+
if (activeRow.length) {
|
41
|
+
var rowExpander = activeRow[0].querySelector(".".concat(blockClass, "__row-expander"));
|
42
|
+
rowExpander.focus();
|
43
|
+
}
|
44
|
+
}, [instance === null || instance === void 0 ? void 0 : instance.tableId, instance === null || instance === void 0 ? void 0 : instance.expandedRows, lastExpandedRowIndex, blockClass, activeElement]);
|
45
|
+
};
|
@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _icons = require("@carbon/react/icons");
|
14
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
15
15
|
var _settings = require("../../settings");
|
16
|
+
var _useFocusRowExpander = require("./useFocusRowExpander");
|
16
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
17
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
18
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -25,9 +26,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
25
26
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
26
27
|
var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
27
28
|
var tempState = (0, _react.useRef)();
|
29
|
+
var lastExpandedRowIndex = (0, _react.useRef)();
|
28
30
|
var useInstance = function useInstance(instance) {
|
29
31
|
tempState.current = instance;
|
30
32
|
};
|
33
|
+
(0, _useFocusRowExpander.useFocusRowExpander)({
|
34
|
+
instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
|
35
|
+
lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
|
36
|
+
blockClass: blockClass,
|
37
|
+
activeElement: document.activeElement
|
38
|
+
});
|
31
39
|
var visibleColumns = function visibleColumns(columns) {
|
32
40
|
var expanderColumn = {
|
33
41
|
id: 'expander',
|
@@ -39,6 +47,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
|
|
39
47
|
// Prevents `onRowClick` from being called if `useOnRowClick` is included
|
40
48
|
event.stopPropagation();
|
41
49
|
row.toggleRowExpanded();
|
50
|
+
lastExpandedRowIndex.current = row.id;
|
42
51
|
}
|
43
52
|
});
|
44
53
|
var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
|
@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
-
var _react = require("react");
|
10
|
-
var _settings = require("../../settings");
|
11
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
10
|
+
var _settings = require("../../settings");
|
12
11
|
var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
|
13
12
|
/**
|
14
13
|
* Copyright IBM Corp. 2020, 2023
|
@@ -19,9 +18,6 @@ var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpand
|
|
19
18
|
|
20
19
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
21
20
|
var useNestedRows = function useNestedRows(hooks) {
|
22
|
-
(0, _react.useEffect)(function () {
|
23
|
-
_settings.pkg.checkReportFeatureEnabled('Datagrid.useNestedRows');
|
24
|
-
}, []);
|
25
21
|
(0, _useNestedRowExpander.default)(hooks);
|
26
22
|
var marginLeft = 24;
|
27
23
|
var getRowProps = function getRowProps(props, _ref) {
|
@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _icons = require("@carbon/react/icons");
|
14
14
|
var _settings = require("../../settings");
|
15
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
16
|
+
var _useFocusRowExpander = require("./useFocusRowExpander");
|
16
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
17
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
18
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -25,9 +26,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
25
26
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
26
27
|
var useRowExpander = function useRowExpander(hooks) {
|
27
28
|
var tempState = (0, _react.useRef)();
|
29
|
+
var lastExpandedRowIndex = (0, _react.useRef)();
|
28
30
|
var useInstance = function useInstance(instance) {
|
29
31
|
tempState.current = instance;
|
30
32
|
};
|
33
|
+
(0, _useFocusRowExpander.useFocusRowExpander)({
|
34
|
+
instance: tempState === null || tempState === void 0 ? void 0 : tempState.current,
|
35
|
+
lastExpandedRowIndex: lastExpandedRowIndex === null || lastExpandedRowIndex === void 0 ? void 0 : lastExpandedRowIndex.current,
|
36
|
+
blockClass: blockClass,
|
37
|
+
activeElement: document.activeElement
|
38
|
+
});
|
31
39
|
var visibleColumns = function visibleColumns(columns) {
|
32
40
|
var expanderColumn = {
|
33
41
|
id: 'expander',
|
@@ -38,6 +46,7 @@ var useRowExpander = function useRowExpander(hooks) {
|
|
38
46
|
// Prevents `onRowClick` from being called if `useOnRowClick` is included
|
39
47
|
event.stopPropagation();
|
40
48
|
row.toggleRowExpanded();
|
49
|
+
lastExpandedRowIndex.current = row.id;
|
41
50
|
}
|
42
51
|
});
|
43
52
|
var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
|
@@ -50,7 +50,14 @@ var useSelectRows = function useSelectRows(hooks) {
|
|
50
50
|
});
|
51
51
|
});
|
52
52
|
hooks.visibleColumns.push(function (columns) {
|
53
|
-
|
53
|
+
// Ensures that the first column is the row expander in the
|
54
|
+
// case of selected rows and expandable rows being used together
|
55
|
+
var newColOrder = (0, _toConsumableArray2.default)(columns);
|
56
|
+
var expanderColumnIndex = newColOrder.findIndex(function (col) {
|
57
|
+
return col.id === 'expander';
|
58
|
+
});
|
59
|
+
var expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
|
60
|
+
return [].concat((0, _toConsumableArray2.default)(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), [{
|
54
61
|
id: _commonColumnIds.selectionColumnId,
|
55
62
|
Header: function Header(gridState) {
|
56
63
|
return /*#__PURE__*/_react.default.createElement(_DatagridSelectAll.SelectAll, gridState);
|
@@ -58,7 +65,7 @@ var useSelectRows = function useSelectRows(hooks) {
|
|
58
65
|
Cell: function Cell(gridState) {
|
59
66
|
return /*#__PURE__*/_react.default.createElement(SelectRow, gridState);
|
60
67
|
}
|
61
|
-
}]
|
68
|
+
}], (0, _toConsumableArray2.default)(newColOrder));
|
62
69
|
});
|
63
70
|
};
|
64
71
|
var useHighlightSelection = function useHighlightSelection(hooks) {
|