@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.
Files changed (46) hide show
  1. package/css/index-full-carbon.css +521 -184
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +66 -7
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +72 -7
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +119 -7
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/CreateSidePanel/CreateSidePanel.js +7 -1
  18. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -1
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +13 -3
  20. package/es/components/Datagrid/useExpandedRow.js +3 -6
  21. package/es/components/Datagrid/useFocusRowExpander.js +40 -0
  22. package/es/components/Datagrid/useNestedRowExpander.js +9 -0
  23. package/es/components/Datagrid/useNestedRows.js +1 -5
  24. package/es/components/Datagrid/useRowExpander.js +9 -0
  25. package/es/components/Datagrid/useSelectRows.js +9 -2
  26. package/es/components/EditSidePanel/EditSidePanel.js +8 -2
  27. package/es/components/SidePanel/SidePanel.js +39 -19
  28. package/es/global/js/hooks/useCreateComponentStepChange.js +1 -1
  29. package/es/global/js/package-settings.js +0 -2
  30. package/lib/components/CreateSidePanel/CreateSidePanel.js +7 -1
  31. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -1
  32. package/lib/components/Datagrid/Datagrid/DatagridRow.js +13 -3
  33. package/lib/components/Datagrid/useExpandedRow.js +2 -5
  34. package/lib/components/Datagrid/useFocusRowExpander.js +45 -0
  35. package/lib/components/Datagrid/useNestedRowExpander.js +9 -0
  36. package/lib/components/Datagrid/useNestedRows.js +1 -5
  37. package/lib/components/Datagrid/useRowExpander.js +9 -0
  38. package/lib/components/Datagrid/useSelectRows.js +9 -2
  39. package/lib/components/EditSidePanel/EditSidePanel.js +8 -2
  40. package/lib/components/SidePanel/SidePanel.js +38 -18
  41. package/lib/global/js/hooks/useCreateComponentStepChange.js +1 -1
  42. package/lib/global/js/package-settings.js +0 -2
  43. package/package.json +5 -5
  44. package/scss/components/Datagrid/styles/_useExpandedRow.scss +21 -0
  45. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -0
  46. 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
- return [{
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
- }].concat(_toConsumableArray(columns));
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(blockClass, "-outer"));
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(blockClass, "-outer"));
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(blockClass, "-outer"));
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(blockClass, "-outer"));
188
- var sidePanelScrollArea = document.querySelector("#".concat(blockClass, "-outer .").concat(blockClass, "__inner-content"));
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(blockClass, "-outer"));
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(Button, {
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: "".concat(blockClass, "-outer"),
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(0);
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
- return [{
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
- }].concat((0, _toConsumableArray2.default)(columns));
68
+ }], (0, _toConsumableArray2.default)(newColOrder));
62
69
  });
63
70
  };
64
71
  var useHighlightSelection = function useHighlightSelection(hooks) {