@carbon/ibm-products 1.58.0 → 1.59.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. package/css/index-full-carbon.css +23 -0
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +21 -0
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +2 -2
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +21 -0
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +2 -2
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/Checklist/Checklist.js +3 -3
  14. package/es/components/Checklist/ChecklistChart.js +3 -9
  15. package/es/components/CreateFullPage/CreateFullPage.js +25 -3
  16. package/es/components/Datagrid/Datagrid/DatagridContent.js +8 -6
  17. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +2 -1
  18. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +26 -13
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +41 -33
  20. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +34 -18
  21. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +2 -37
  22. package/es/components/Datagrid/useExpandedRow.js +1 -1
  23. package/es/components/Datagrid/utils/DatagridPagination.js +1 -1
  24. package/es/components/InlineTip/InlineTip.js +5 -1
  25. package/es/components/InlineTip/InlineTipButton.js +1 -8
  26. package/es/components/InlineTip/InlineTipLink.js +1 -8
  27. package/es/global/js/utils/test-helper.js +2 -2
  28. package/lib/components/Checklist/Checklist.js +3 -3
  29. package/lib/components/Checklist/ChecklistChart.js +3 -9
  30. package/lib/components/CreateFullPage/CreateFullPage.js +24 -2
  31. package/lib/components/Datagrid/Datagrid/DatagridContent.js +8 -6
  32. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +2 -1
  33. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +26 -13
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +41 -33
  35. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +35 -19
  36. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +2 -40
  37. package/lib/components/Datagrid/useExpandedRow.js +1 -1
  38. package/lib/components/Datagrid/utils/DatagridPagination.js +1 -1
  39. package/lib/components/InlineTip/InlineTip.js +4 -0
  40. package/lib/components/InlineTip/InlineTipButton.js +2 -9
  41. package/lib/components/InlineTip/InlineTipLink.js +2 -9
  42. package/lib/global/js/utils/test-helper.js +2 -2
  43. package/package.json +10 -10
  44. package/scss/components/ComboButton/_combo-button.scss +2 -1
  45. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  46. package/scss/components/Datagrid/styles/_useExpandedRow.scss +10 -0
  47. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +6 -1
  48. package/scss/components/Toolbar/_toolbar.scss +6 -3
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["className", "ariaLabelledById", "value", "theme"];
3
+ var _excluded = ["className", "value", "theme"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2023, 2023
6
6
  *
@@ -53,17 +53,15 @@ var defaults = {
53
53
  */
54
54
  export var ChecklistChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
55
55
  var className = _ref.className,
56
- ariaLabelledById = _ref.ariaLabelledById,
57
56
  value = _ref.value,
58
57
  _ref$theme = _ref.theme,
59
58
  theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
60
59
  rest = _objectWithoutProperties(_ref, _excluded);
61
60
  var numDegrees = clamp(value * 360, 0, 360);
62
- var circleColor = theme === 'light' ? '#c6c6c6' : '#525252'; // $gray-30, $gray-70
63
- var progressColor = theme === 'light' ? '#6929c4' : '#A56EFF'; // $purple-70, $purple-50
61
+ var circleColor = theme === 'light' ? '#e0e0e0' : '#525252'; // $ui-03 (-ish)
62
+ var progressColor = theme === 'light' ? '#a56eff' : '#a56eff'; // $purple-50
64
63
 
65
64
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
66
- "aria-labelledby": ariaLabelledById,
67
65
  className: cx(blockClass, className),
68
66
  style: {
69
67
  backgroundImage: "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"),
@@ -85,10 +83,6 @@ export var ChecklistChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
85
83
  // in alphabetical order (for consistency).
86
84
  // See https://www.npmjs.com/package/prop-types#usage.
87
85
  ChecklistChart.propTypes = {
88
- /**
89
- * Id of the parent's aria-label for accessibility.
90
- */
91
- ariaLabelledById: PropTypes.string.isRequired,
92
86
  /**
93
87
  * Optional class name for this component.
94
88
  */
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
4
+ var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "initialStep", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
5
5
  /**
6
6
  * Copyright IBM Corp. 2021, 2023
7
7
  *
@@ -22,8 +22,9 @@ import { pkg } from '../../settings';
22
22
  import { Grid, ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form } from 'carbon-components-react';
23
23
  import { CreateInfluencer } from '../CreateInfluencer';
24
24
  import { ActionSet } from '../ActionSet';
25
- import { usePreviousValue, useValidCreateStepCount, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
25
+ import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
26
26
  import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
27
+ import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
27
28
  var blockClass = "".concat(pkg.prefix, "--create-full-page");
28
29
  var componentName = 'CreateFullPage';
29
30
 
@@ -40,6 +41,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
40
41
  cancelButtonText = _ref.cancelButtonText,
41
42
  children = _ref.children,
42
43
  className = _ref.className,
44
+ initialStep = _ref.initialStep,
43
45
  modalDangerButtonText = _ref.modalDangerButtonText,
44
46
  modalDescription = _ref.modalDescription,
45
47
  modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -110,7 +112,11 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
110
112
  if (lastItem !== lastIncludedStep) {
111
113
  setLastIncludedStep(lastItem);
112
114
  }
113
- }, [stepData, firstIncludedStep, lastIncludedStep]);
115
+ if (open && initialStep) {
116
+ var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
117
+ setCurrentStep(Number(initialStep + numberOfHiddenSteps));
118
+ }
119
+ }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
114
120
  useCreateComponentFocus({
115
121
  previousState: previousState,
116
122
  currentStep: currentStep,
@@ -119,6 +125,16 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
119
125
  firstFocusElement: firstFocusElement
120
126
  });
121
127
  useValidCreateStepCount(stepData.length, componentName);
128
+ useResetCreateComponent({
129
+ firstIncludedStep: firstIncludedStep,
130
+ previousState: previousState,
131
+ open: open,
132
+ setCurrentStep: setCurrentStep,
133
+ stepData: stepData,
134
+ initialStep: initialStep,
135
+ totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
136
+ componentName: componentName
137
+ });
122
138
  useCreateComponentStepChange({
123
139
  firstIncludedStep: firstIncludedStep,
124
140
  lastIncludedStep: lastIncludedStep,
@@ -242,6 +258,12 @@ CreateFullPage.propTypes = {
242
258
  * Specifies elements to focus on first on render.
243
259
  */
244
260
  firstFocusElement: PropTypes.string,
261
+ /**
262
+ * This can be used to open the component to a step other than the first step.
263
+ * For example, a create flow was previously in progress, data was saved, and
264
+ * is now being completed.
265
+ */
266
+ initialStep: PropTypes.number,
245
267
  /**
246
268
  * The primary 'danger' button text in the modal
247
269
  */
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  /**
4
- * Copyright IBM Corp. 2022, 2022
4
+ * Copyright IBM Corp. 2022, 2023
5
5
  *
6
6
  * This source code is licensed under the Apache-2.0 license found in the
7
7
  * LICENSE file in the root directory of this source tree.
@@ -62,8 +62,10 @@ export var DatagridContent = function DatagridContent(_ref) {
62
62
  DatagridActions = datagridState.DatagridActions,
63
63
  totalColumnsWidth = datagridState.totalColumnsWidth,
64
64
  gridRef = datagridState.gridRef,
65
- state = datagridState.state;
66
- var rows = DatagridPagination && datagridState.page || datagridState.rows;
65
+ state = datagridState.state,
66
+ page = datagridState.page,
67
+ rows = datagridState.rows;
68
+ var contentRows = DatagridPagination && page || rows;
67
69
  var gridAreaRef = useRef();
68
70
  var multiKeyTrackingRef = useRef();
69
71
  useClickOutside(gridAreaRef, function (target) {
@@ -101,8 +103,8 @@ export var DatagridContent = function DatagridContent(_ref) {
101
103
  return handleGridFocus(inlineEditState, dispatch);
102
104
  } : null,
103
105
  title: title
104
- }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
105
- rows: rows
106
+ }), !withVirtualScroll && /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
107
+ rows: contentRows
106
108
  })));
107
109
  };
108
110
  var _useMultipleKeyTracki = useMultipleKeyTracking({
@@ -153,7 +155,7 @@ export var DatagridContent = function DatagridContent(_ref) {
153
155
  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
154
156
  className: "".concat(blockClass, "__virtualScrollContainer"),
155
157
  ref: gridRef
156
- }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
158
+ }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
157
159
  instance: datagridState
158
160
  }));
159
161
  };
@@ -38,7 +38,8 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
38
38
  }), {
39
39
  className: "".concat(blockClass, "__empty-state-body")
40
40
  }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
41
- colSpan: headers.length
41
+ colSpan: headers.length,
42
+ className: "".concat(blockClass, "__empty-state-cell")
42
43
  }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState, emptyStateProps))));
43
44
  };
44
45
  export default DatagridEmptyBody;
@@ -1,9 +1,8 @@
1
- /*
2
- * Licensed Materials - Property of IBM
3
- * 5724-Q36
4
- * (c) Copyright IBM Corp. 2020
5
- * US Government Users Restricted Rights - Use, duplication or disclosure
6
- * restricted by GSA ADP Schedule Contract with IBM Corp.
1
+ /**
2
+ * Copyright IBM Corp. 2020, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
7
6
  */
8
7
 
9
8
  import React from 'react';
@@ -11,17 +10,31 @@ import { pkg } from '../../../settings';
11
10
  var blockClass = "".concat(pkg.prefix, "--datagrid");
12
11
 
13
12
  // eslint-disable-next-line react/prop-types
14
- var DatagridExpandedRow = function DatagridExpandedRow(PreviousRowRenderer, ExpandedRowContentComponent) {
13
+ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
15
14
  return function (datagridState) {
16
15
  var row = datagridState.row;
17
16
  var _ref = row || {},
18
17
  expandedContentHeight = _ref.expandedContentHeight;
19
- if (!row.isExpanded) {
20
- return PreviousRowRenderer(datagridState);
21
- }
22
- return /*#__PURE__*/React.createElement("div", {
23
- className: "".concat(blockClass, "__expanded-row")
24
- }, PreviousRowRenderer(datagridState), /*#__PURE__*/React.createElement("div", {
18
+ var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
19
+ var _event$target, _event$target$parentN;
20
+ if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$parentN = _event$target.parentNode) !== null && _event$target$parentN !== void 0 && _event$target$parentN.previousElementSibling) {
21
+ var parentNode = event.target.parentNode.previousElementSibling;
22
+ if (eventType === 'enter') {
23
+ parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
24
+ } else {
25
+ parentNode.classList.remove("".concat(blockClass, "__expandable-row--hover"));
26
+ }
27
+ }
28
+ };
29
+ return /*#__PURE__*/React.createElement("tr", {
30
+ className: "".concat(blockClass, "__expanded-row"),
31
+ onMouseEnter: function onMouseEnter(event) {
32
+ return toggleParentHoverClass(event, 'enter');
33
+ },
34
+ onMouseLeave: function onMouseLeave(event) {
35
+ return toggleParentHoverClass(event);
36
+ }
37
+ }, /*#__PURE__*/React.createElement("div", {
25
38
  className: "".concat(blockClass, "__expanded-row-content"),
26
39
  style: {
27
40
  height: expandedContentHeight ? expandedContentHeight : null
@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  var _excluded = ["children"];
5
+ 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; }
6
+ 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; }
5
7
  /*
6
8
  * Licensed Materials - Property of IBM
7
9
  * 5724-Q36
@@ -32,7 +34,8 @@ var DatagridRow = function DatagridRow(datagridState) {
32
34
  var _cx;
33
35
  var row = datagridState.row,
34
36
  rowSize = datagridState.rowSize,
35
- withNestedRows = datagridState.withNestedRows;
37
+ withNestedRows = datagridState.withNestedRows,
38
+ prepareRow = datagridState.prepareRow;
36
39
  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
37
40
  var isExpanded = _ref.isExpanded,
38
41
  subRows = _ref.subRows;
@@ -47,6 +50,9 @@ var DatagridRow = function DatagridRow(datagridState) {
47
50
  };
48
51
  var hoverHandler = function hoverHandler(event) {
49
52
  var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
53
+ if (!withNestedRows) {
54
+ return;
55
+ }
50
56
  var subRowCount = getVisibleNestedRowCount(row);
51
57
  var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[rowSize]);
52
58
  var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
@@ -63,48 +69,50 @@ var DatagridRow = function DatagridRow(datagridState) {
63
69
  el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
64
70
  });
65
71
  };
66
- return /*#__PURE__*/React.createElement(TableRow, _extends({
67
- className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
72
+ var renderExpandedRow = function renderExpandedRow() {
73
+ if (row.isExpanded) {
74
+ var _row$RowExpansionRend;
75
+ prepareRow(row);
76
+ return row === null || row === void 0 ? void 0 : (_row$RowExpansionRend = row.RowExpansionRenderer) === null || _row$RowExpansionRend === void 0 ? void 0 : _row$RowExpansionRend.call(row, _objectSpread(_objectSpread({}, datagridState), {}, {
77
+ row: row
78
+ }));
79
+ }
80
+ return null;
81
+ };
82
+ var handleMouseLeave = function handleMouseLeave(event) {
83
+ var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
84
+ hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
85
+ };
86
+ var handleOnKeyUp = function handleOnKeyUp(event) {
87
+ if (!withNestedRows) {
88
+ return;
89
+ }
90
+ if (event.key === 'Enter' || event.key === 'Space') {
91
+ focusRemover();
92
+ hoverHandler(event);
93
+ }
94
+ };
95
+ var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
96
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, _extends({
97
+ className: rowClassNames
68
98
  }, row.getRowProps({
69
99
  role: false
70
100
  }), {
71
101
  key: row.id,
72
- onMouseEnter: function onMouseEnter(event) {
73
- if (!withNestedRows) {
74
- return;
75
- }
76
- hoverHandler(event);
77
- },
78
- onMouseLeave: function onMouseLeave(event) {
79
- var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
80
- hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
81
- },
82
- onFocus: function onFocus(event) {
83
- if (!withNestedRows) {
84
- return;
85
- }
86
- hoverHandler(event);
87
- },
88
- onBlur: function onBlur() {
89
- focusRemover();
90
- },
91
- onKeyUp: function onKeyUp(event) {
92
- if (!withNestedRows) {
93
- return;
94
- }
95
- if (event.key === 'Enter' || event.key === 'Space') {
96
- focusRemover();
97
- hoverHandler(event);
98
- }
99
- }
102
+ onMouseEnter: hoverHandler,
103
+ onMouseLeave: handleMouseLeave,
104
+ onFocus: hoverHandler,
105
+ onBlur: focusRemover,
106
+ onKeyUp: handleOnKeyUp
100
107
  }), row.cells.map(function (cell, index) {
108
+ var _cell$column;
101
109
  var cellProps = cell.getCellProps({
102
110
  role: false
103
111
  });
104
112
  var children = cellProps.children,
105
113
  restProps = _objectWithoutProperties(cellProps, _excluded);
106
114
  var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));
107
- if (cell && cell.column && cell.column.id === selectionColumnId) {
115
+ if ((cell === null || cell === void 0 ? void 0 : (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === selectionColumnId) {
108
116
  // directly render component without the wrapping TableCell
109
117
  return cell.render('Cell', {
110
118
  key: cell.column.id
@@ -115,6 +123,6 @@ var DatagridRow = function DatagridRow(datagridState) {
115
123
  }, restProps, {
116
124
  key: cell.column.id
117
125
  }), content);
118
- }));
126
+ })), renderExpandedRow());
119
127
  };
120
128
  export default DatagridRow;
@@ -10,42 +10,58 @@ var _excluded = ["legendText"];
10
10
  * LICENSE file in the root directory of this source tree.
11
11
  */
12
12
 
13
- import * as React from 'react';
13
+ import React, { useRef, useState } from 'react';
14
14
  import PropTypes from 'prop-types';
15
15
  import { Settings16 } from '@carbon/icons-react';
16
16
  import { Button } from 'carbon-components-react';
17
17
  import cx from 'classnames';
18
18
  import RowSizeRadioGroup from './RowSizeRadioGroup';
19
19
  import { pkg } from '../../../../../settings';
20
- var blockClass = "".concat(pkg.prefix, "--datagrid");
20
+ var blockClass = "".concat(pkg.prefix, "--datagrid__row-size");
21
21
  var RowSizeDropdown = function RowSizeDropdown(_ref) {
22
22
  var _ref$legendText = _ref.legendText,
23
23
  legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
24
24
  props = _objectWithoutProperties(_ref, _excluded);
25
- var buttonRef = React.useRef({});
26
- var _React$useState = React.useState(false),
27
- _React$useState2 = _slicedToArray(_React$useState, 2),
28
- isOpen = _React$useState2[0],
29
- setIsOpen = _React$useState2[1];
30
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
25
+ var buttonRef = useRef(null);
26
+ var _useState = useState(false),
27
+ _useState2 = _slicedToArray(_useState, 2),
28
+ isOpen = _useState2[0],
29
+ setIsOpen = _useState2[1];
30
+ var onCloseHandler = function onCloseHandler() {
31
+ setIsOpen(false);
32
+ };
33
+ var onBlurHandler = function onBlurHandler(e) {
34
+ if (!e.currentTarget.contains(e.relatedTarget)) {
35
+ onCloseHandler();
36
+ }
37
+ };
38
+ var onClickHandler = function onClickHandler() {
39
+ setIsOpen(!isOpen);
40
+ };
41
+ var onKeyHandler = function onKeyHandler(e) {
42
+ if (e.key === 'Escape') {
43
+ onCloseHandler();
44
+ }
45
+ };
46
+ return /*#__PURE__*/React.createElement("div", {
47
+ tabIndex: -1,
48
+ className: blockClass,
49
+ role: "presentation",
50
+ onBlur: onBlurHandler,
51
+ onKeyDown: onKeyHandler
52
+ }, /*#__PURE__*/React.createElement(Button, {
53
+ tabIndex: 0,
31
54
  hasIconOnly: true,
32
55
  ref: buttonRef,
33
56
  kind: "ghost",
34
57
  tooltipPosition: "bottom",
35
58
  renderIcon: Settings16,
36
- onClick: function onClick() {
37
- return setIsOpen(function (prevOpen) {
38
- return !prevOpen;
39
- });
40
- },
41
59
  iconDescription: legendText,
42
- className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
60
+ className: cx("".concat(blockClass, "-button"), _defineProperty({}, "".concat(blockClass, "-button--open"), isOpen)),
61
+ onClick: onClickHandler
43
62
  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
44
63
  legendText: legendText,
45
- buttonRef: buttonRef,
46
- hideRadioGroup: function hideRadioGroup() {
47
- setIsOpen(false);
48
- }
64
+ buttonRef: buttonRef
49
65
  })));
50
66
  };
51
67
  RowSizeDropdown.propTypes = {
@@ -8,9 +8,8 @@
8
8
  * restricted by GSA ADP Schedule Contract with IBM Corp.
9
9
  */
10
10
 
11
- import React, { useEffect } from 'react';
11
+ import React from 'react';
12
12
  import PropTypes from 'prop-types';
13
- import { rem } from '@carbon/layout';
14
13
  import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
15
14
  import isArray from 'lodash/isArray';
16
15
  import { pkg } from '../../../../../settings';
@@ -19,9 +18,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
19
18
  var rowSizes = _ref.rowSizes,
20
19
  selectedOption = _ref.selectedOption,
21
20
  datagridName = _ref.datagridName,
22
- buttonRef = _ref.buttonRef,
23
21
  onChange = _ref.onChange,
24
- hideRadioGroup = _ref.hideRadioGroup,
25
22
  legendText = _ref.legendText,
26
23
  _ref$rowSizeLabels = _ref.rowSizeLabels,
27
24
  rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
@@ -31,25 +28,9 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
31
28
  sm: 'Small',
32
29
  xs: 'Extra small'
33
30
  } : _ref$rowSizeLabels;
34
- var _getDropdownPosition = getDropdownPosition(buttonRef.current),
35
- top = _getDropdownPosition.top,
36
- right = _getDropdownPosition.right;
37
- useEffect(function () {
38
- window.addEventListener('click', hideRadioGroup);
39
- return function () {
40
- window.removeEventListener('click', hideRadioGroup);
41
- };
42
- }, [hideRadioGroup]);
43
31
  return /*#__PURE__*/React.createElement("div", {
44
32
  className: "".concat(blockClass, "__row-size-dropdown"),
45
- style: {
46
- top: rem(top),
47
- right: rem(right)
48
- },
49
- role: "presentation",
50
- onClick: function onClick(e) {
51
- e.stopPropagation();
52
- }
33
+ role: "presentation"
53
34
  }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
54
35
  legendText: legendText,
55
36
  name: "row-height-group",
@@ -83,21 +64,6 @@ var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize
83
64
 
84
65
  return rowSizeMap[rowSize] || rowSize;
85
66
  };
86
- var getDropdownPosition = function getDropdownPosition(buttonEle) {
87
- var parent = buttonEle.parentElement;
88
- if (parent instanceof HTMLElement) {
89
- var top = buttonEle.offsetTop + buttonEle.offsetHeight;
90
- var right = parent.offsetWidth - (buttonEle.offsetLeft + buttonEle.offsetWidth);
91
- return {
92
- top: top,
93
- right: right
94
- };
95
- }
96
- return {
97
- top: 0,
98
- right: 0
99
- };
100
- };
101
67
  RowSizeRadioGroup.defaultProps = {
102
68
  rowSizes: [{
103
69
  value: 'xl' // 64
@@ -116,7 +82,6 @@ RowSizeRadioGroup.defaultProps = {
116
82
  RowSizeRadioGroup.propTypes = {
117
83
  buttonRef: PropTypes.any.isRequired,
118
84
  datagridName: PropTypes.string,
119
- hideRadioGroup: PropTypes.func.isRequired,
120
85
  legendText: PropTypes.string,
121
86
  onChange: PropTypes.func.isRequired,
122
87
  rowSizeLabels: PropTypes.object,
@@ -33,7 +33,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
33
33
  return _objectSpread(_objectSpread({}, row), {}, {
34
34
  canExpand: row.original && !row.original.notExpandable,
35
35
  expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
36
- RowRenderer: DatagridExpandedRow(row.RowRenderer, ExpandedRowContentComponent)
36
+ RowExpansionRenderer: DatagridExpandedRow(ExpandedRowContentComponent)
37
37
  });
38
38
  });
39
39
  Object.assign(instance, {
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable react/prop-types */
2
2
  /**
3
- * Copyright IBM Corp. 2022, 2022
3
+ * Copyright IBM Corp. 2022, 2023
4
4
  *
5
5
  * This source code is licensed under the Apache-2.0 license found in the
6
6
  * LICENSE file in the root directory of this source tree.
@@ -10,7 +10,7 @@ var _excluded = ["children", "className", "closeIconDescription", "collapsible",
10
10
  */
11
11
 
12
12
  // Import portions of React that are needed.
13
- import React, { useEffect, useMemo, useState } from 'react';
13
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
14
14
 
15
15
  // Other standard imports.
16
16
  import { Close16, Crossroads16, Idea20 } from '@carbon/icons-react';
@@ -20,6 +20,7 @@ import cx from 'classnames';
20
20
  import { getComponentText } from './utils';
21
21
  import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
22
22
  import { getDevtoolsProps } from '../../global/js/utils/devtools';
23
+ import uuidv4 from '../../global/js/utils/uuidv4';
23
24
  import { pkg /*, carbon */ } from '../../settings';
24
25
 
25
26
  // Carbon and package components we use.
@@ -79,6 +80,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
79
80
  _useState2 = _slicedToArray(_useState, 2),
80
81
  isCollapsed = _useState2[0],
81
82
  setIsCollapsed = _useState2[1];
83
+ var labelId = useRef(uuidv4()).current;
82
84
  var previewText = useMemo(function () {
83
85
  return getComponentText(React.Children.toArray(children));
84
86
  }, [children]);
@@ -94,6 +96,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
94
96
  setIsCollapsed(collapsible);
95
97
  }, [collapsible]);
96
98
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
99
+ "aria-labelledby": labelId,
97
100
  className: cx(blockClass,
98
101
  // Apply the block class to the main HTML element
99
102
  className,
@@ -115,6 +118,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
115
118
  }, /*#__PURE__*/React.createElement(Idea20, null)), /*#__PURE__*/React.createElement("div", {
116
119
  className: "".concat(blockClass, "__content")
117
120
  }, /*#__PURE__*/React.createElement("h6", {
121
+ id: labelId,
118
122
  className: "".concat(blockClass, "__title")
119
123
  }, title), /*#__PURE__*/React.createElement("section", {
120
124
  className: "".concat(blockClass, "__body")
@@ -42,7 +42,7 @@ var componentName = 'InlineTipButton';
42
42
  // };
43
43
 
44
44
  /**
45
- * TODO: A description of the component.
45
+ * TODO: A standard Carbon button, styled specifically for use inside InlineTip.
46
46
  */
47
47
  export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
48
48
  var children = _ref.children,
@@ -65,13 +65,6 @@ export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref)
65
65
  }), children);
66
66
  });
67
67
 
68
- // Return a placeholder if not released and not enabled by feature flag
69
- InlineTipButton = pkg.checkComponentEnabled(InlineTipButton, componentName);
70
-
71
- // The display name of the component, used by React. Note that displayName
72
- // is used in preference to relying on function.name.
73
- InlineTipButton.displayName = componentName;
74
-
75
68
  // The types and DocGen commentary for the component props,
76
69
  // in alphabetical order (for consistency).
77
70
  // See https://www.npmjs.com/package/prop-types#usage.
@@ -43,7 +43,7 @@ var componentName = 'InlineTipLink';
43
43
  // };
44
44
 
45
45
  /**
46
- * TODO: A description of the component.
46
+ * TODO: A standard Carbon link, styled specifically for use inside InlineTip.
47
47
  */
48
48
  export var InlineTipLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
49
49
  var children = _ref.children,
@@ -65,13 +65,6 @@ export var InlineTipLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
65
65
  }), children);
66
66
  });
67
67
 
68
- // Return a placeholder if not released and not enabled by feature flag
69
- InlineTipLink = pkg.checkComponentEnabled(InlineTipLink, componentName);
70
-
71
- // The display name of the component, used by React. Note that displayName
72
- // is used in preference to relying on function.name.
73
- InlineTipLink.displayName = componentName;
74
-
75
68
  // The types and DocGen commentary for the component props,
76
69
  // in alphabetical order (for consistency).
77
70
  // See https://www.npmjs.com/package/prop-types#usage.
@@ -109,7 +109,7 @@ var makeMatcherArray = function makeMatcherArray(args) {
109
109
  * A helper function to enable a test to expect a single call to
110
110
  * console.warn, for example when intentionally using a deprecated prop
111
111
  * or supplying invalid parameters for the purposes of the test.
112
- * @param {string|regex|Function|[]} message the expected parameters for the call to
112
+ * @param {string | regex | Function | []} message the expected parameters for the call to
113
113
  * console.warn, which must be called exactly once. A single string or regex or an
114
114
  * expect matcher can be used to match a single-argument call to console.warn (most common),
115
115
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -220,7 +220,7 @@ export var expectLogging = function expectLogging(_ref2, test) {
220
220
  * A helper function to enable a test to expect a single call to
221
221
  * console.error, for example when intentionally omitting a required prop
222
222
  * or supplying an invalid prop type or value for the purposes of the test.
223
- * @param {string|regex|Function|[]} message the expected parameters for the call to
223
+ * @param {string | regex | Function | []} message the expected parameters for the call to
224
224
  * console.error, which must be called exactly once. A single string or regex or an
225
225
  * expect matcher can be used to match a single-argument call to console.error (most common),
226
226
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -118,9 +118,9 @@ var Checklist = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
118
118
  }, (0, _devtools.getDevtoolsProps)(componentName)), (title || chartLabelAndValue) && /*#__PURE__*/_react.default.createElement("header", {
119
119
  className: "".concat(blockClass, "__header")
120
120
  }, chartLabelAndValue && /*#__PURE__*/_react.default.createElement(_ChecklistChart.ChecklistChart, {
121
- ariaLabelledById: chartLabelId,
122
- value: chartValue,
123
- theme: theme
121
+ "aria-labelledby": chartLabelId,
122
+ theme: theme,
123
+ value: chartValue
124
124
  }), /*#__PURE__*/_react.default.createElement("div", {
125
125
  className: "".concat(blockClass, "__titles")
126
126
  }, title && /*#__PURE__*/_react.default.createElement("h2", {