@carbon/ibm-products 2.10.2 → 2.11.1

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -1,18 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@carbon/react");
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
 var _settings = require("../../../../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _DraggableItemsList = require("./DraggableItemsList");
+var _uuidv = _interopRequireDefault(require("../../../../../global/js/utils/uuidv4"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -20,20 +25,7 @@ var _DraggableItemsList = require("./DraggableItemsList");
  * LICENSE file in the root directory of this source tree.
  */
 
-// import { DndProvider } from 'react-dnd';
-// import { HTML5Backend } from 'react-dnd-html5-backend';
-// import update from 'immutability-helper';
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var getNextIndex = function getNextIndex(array, currentIndex, key) {
-  var newIndex = -1;
-  if (key === 'ArrowUp') {
-    newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
-  }
-  if (key === 'ArrowDown') {
-    newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
-  }
-  return newIndex;
-};
 var Columns = function Columns(_ref) {
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
     filterString = _ref.filterString,
@@ -43,43 +35,26 @@ var Columns = function Columns(_ref) {
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
     selectAllLabel = _ref.selectAllLabel;
+  var listId = (0, _react.useRef)((0, _uuidv.default)()); // keep id between renders
+  var listRef = (0, _react.useRef)(null);
   var _React$useState = _react.default.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
     setAriaRegionText = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(-1),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    focusIndex = _React$useState4[0],
-    setFocusIndex = _React$useState4[1];
-  // const moveElement = React.useCallback(
-  //   (dragIndex, hoverIndex) => {
-  //     const dragCard = columns[dragIndex];
-  //     setColumnsObject(
-  //       update(columns, {
-  //         $splice: [
-  //           [dragIndex, 1],
-  //           [hoverIndex, 0, dragCard],
-  //         ],
-  //       })
-  //     );
-  //   },
-  //   [columns, setColumnsObject]
-  // );
-
+  // after a drag/drop action set the columns
+  var moveElement = _react.default.useCallback(function (from, to) {
+    var fromCol = columns[from];
+    setColumnsObject((0, _immutabilityHelper.default)(columns, {
+      $splice: [[from, 1], [to, 0, fromCol]]
+    }));
+  }, [columns, setColumnsObject]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-column-list")
+    className: "".concat(blockClass, "__customize-columns-column-list"),
+    ref: listRef
   }, /*#__PURE__*/_react.default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
-    onKeyDown: function onKeyDown(e) {
-      var nextIndex = getNextIndex(columns, focusIndex, e.key);
-      if (nextIndex >= 0) {
-        setFocusIndex(nextIndex);
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "assertive",
@@ -101,16 +76,12 @@ var Columns = function Columns(_ref) {
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
   })), /*#__PURE__*/_react.default.createElement(_DraggableItemsList.DraggableItemsList, {
+    id: listId.current,
     columns: columns,
     filterString: filterString,
-    focusIndex: focusIndex,
-    getNextIndex: getNextIndex
-    // moveElement={moveElement}
-    ,
-    onSelectColumn: onSelectColumn,
+    moveElement: moveElement,
     setAriaRegionText: setAriaRegionText,
-    setColumnsObject: setColumnsObject,
-    setFocusIndex: setFocusIndex
+    onSelectColumn: onSelectColumn
   })));
 };
 Columns.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableItemsList = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _react2 = require("@carbon/react");
@@ -12,24 +13,28 @@ var _common = require("./common");
 var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
 var _settings = require("../../../../../settings");
 var _getColTitle2 = _interopRequireDefault(require("../../../utils/getColTitle"));
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+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; }
+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) { (0, _defineProperty2.default)(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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2023, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var matchedColsById = function matchedColsById(col1, col2) {
+  return col1 && col2 && col1.id === col2.id;
+};
 var DraggableItemsList = function DraggableItemsList(_ref) {
   var columns = _ref.columns,
     filterString = _ref.filterString,
-    focusIndex = _ref.focusIndex,
-    getNextIndex = _ref.getNextIndex,
+    id = _ref.id,
+    moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
-    setAriaRegionText = _ref.setAriaRegionText,
-    setColumnsObject = _ref.setColumnsObject,
-    setFocusIndex = _ref.setFocusIndex;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns
+    setAriaRegionText = _ref.setAriaRegionText;
+  var draggableClass = "".concat(blockClass, "__draggable-item");
+  var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
     return !!(0, _getColTitle2.default)(colDef);
@@ -38,7 +43,108 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
   }).filter(function (colDef) {
     var _getColTitle;
     return filterString.length === 0 || ((_getColTitle = (0, _getColTitle2.default)(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
-  }).map(function (colDef, i) {
+  });
+
+  // let localRefCopy;
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    var fromVisibleIndex = columns.findIndex(function (col) {
+      return matchedColsById(col, active);
+    });
+    var toVisibleIndex = columns.findIndex(function (col) {
+      return matchedColsById(col, over);
+    });
+    var colTitle = (0, _getColTitle2.default)(visibleCols[fromVisibleIndex]);
+    setAriaRegionText("".concat(colTitle, " dropped. New position ").concat(toVisibleIndex + 1, " of ").concat(visibleCols.length, "."));
+    var fromIndex = columns.findIndex(function (col) {
+      return matchedColsById(col, active);
+    });
+    var toIndex = columns.findIndex(function (col) {
+      return matchedColsById(col, over);
+    });
+    moveElement(fromIndex, toIndex);
+  };
+  var handleDragStart = function handleDragStart(event) {
+    var active = event.active;
+    var fromIndex = visibleCols.findIndex(function (col) {
+      return matchedColsById(col, active);
+    });
+    var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
+    setAriaRegionText("".concat(colTitle, " grabbed. Current position ").concat(fromIndex + 1, " of ").concat(visibleCols.length, "."));
+  };
+  var handleDragUpdate = function handleDragUpdate(event) {
+    var active = event.active,
+      over = event.over;
+    var fromIndex = visibleCols.findIndex(function (col) {
+      return matchedColsById(col, active);
+    });
+    var toIndex = visibleCols.findIndex(function (col) {
+      return matchedColsById(col, over);
+    });
+    var colTitle = (0, _getColTitle2.default)(visibleCols[fromIndex]);
+    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
+  };
+  var pointerSensor = (0, _core.useSensor)(_core.PointerSensor, {
+    // Require the mouse to move by 10 pixels before activating
+    activationConstraint: {
+      distance: 4
+    }
+  });
+  var keyboardSensor = (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: function coordinateGetter(event, args) {
+      var currentCoordinates = args.currentCoordinates;
+      var target = event.target;
+      while (target && !target.classList.contains(draggableClass)) {
+        target = target.parentNode;
+      }
+      var delta = target.offsetHeight;
+      switch (event.code) {
+        case 'ArrowRight':
+        case 'ArrowLeft':
+          // ignore right and left
+          return currentCoordinates;
+        case 'ArrowUp':
+          return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+            y: currentCoordinates.y - delta
+          });
+        case 'ArrowDown':
+          return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+            y: currentCoordinates.y + delta
+          });
+        case 'Space':
+          break;
+      }
+    }
+  });
+  var sensors = (0, _core.useSensors)(pointerSensor, keyboardSensor);
+  var handleCheckboxKeydown = function handleCheckboxKeydown(event, colDef) {
+    if (event.code === 'Space') {
+      onSelectColumn(colDef, !(0, _common.isColumnVisible)(colDef));
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    collisionDetection: _core.closestCenter,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragUpdate,
+    sensors: sensors
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__draggable-underlay"),
+    "aria-hidden": "true",
+    key: "draggable-underlay-".concat(id)
+  }, visibleCols.map(function (colDef) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__draggable-underlay-item"),
+      key: colDef.id
+    });
+  })), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: visibleCols,
+    strategy: _sortable.verticalListSortingStrategy
+  }, visibleCols.map(function (colDef) {
     var colHeaderTitle = (0, _getColTitle2.default)(colDef);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
@@ -46,7 +152,6 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       checked: (0, _common.isColumnVisible)(colDef),
       disabled: isFrozenColumn,
       onChange: function onChange(_, _ref2) {
@@ -57,7 +162,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       labelText: colHeaderTitle,
       title: colHeaderTitle,
       className: "".concat(blockClass, "__customize-columns-checkbox"),
-      hideLabel: true
+      hideLabel: true,
+      onKeyDown: function onKeyDown(event) {
+        return handleCheckboxKeydown(event, colDef);
+      }
     }), /*#__PURE__*/_react.default.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: highlightedText
@@ -65,47 +173,22 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
     }));
     return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
+      classList: draggableClass,
       key: colDef.id,
-      index: i,
-      listData: columns,
-      setListData: setColumnsObject,
-      id: "dnd-datagrid-columns-".concat(colDef.id),
-      type: "column-customization",
+      id: colDef.id,
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
-      onGrab: setAriaRegionText,
-      isFocused: focusIndex === i
-      // moveElement={moveElement}
-      ,
-      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
-        if (isGrabbed) {
-          var _columns$nextIndex;
-          var nextIndex = getNextIndex(columns, currentIndex, e.key);
-          e.preventDefault();
-          e.stopPropagation();
-          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
-            setFocusIndex(nextIndex);
-            // moveElement(currentIndex, nextIndex);
-            e.target.scrollIntoView({
-              block: 'center'
-            });
-          }
-        }
-      },
       isSticky: isFrozenColumn,
       selected: (0, _common.isColumnVisible)(colDef)
     }, listContents);
-  }));
+  }))));
 };
 exports.DraggableItemsList = DraggableItemsList;
 DraggableItemsList.propTypes = {
   columns: _propTypes.PropTypes.array.isRequired,
   filterString: _propTypes.PropTypes.string.isRequired,
-  focusIndex: _propTypes.PropTypes.number.isRequired,
-  getNextIndex: _propTypes.PropTypes.func.isRequired,
-  // moveElement: PropTypes.func.isRequired,
+  id: _propTypes.PropTypes.string.isRequired,
+  moveElement: _propTypes.PropTypes.func.isRequired,
   onSelectColumn: _propTypes.PropTypes.func.isRequired,
-  setAriaRegionText: _propTypes.PropTypes.func.isRequired,
-  setColumnsObject: _propTypes.PropTypes.func.isRequired,
-  setFocusIndex: _propTypes.PropTypes.func.isRequired
+  setAriaRegionText: _propTypes.PropTypes.func.isRequired
 };

package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js

@@ -13,7 +13,7 @@ var DocsPage = function DocsPage() {
       description: "The `Datagrid` supports expandable rows with the use of the `useExpandedRow` hook.",
       source: {
         language: 'jsx',
-        code: "\nimport { Datagrid, useDatagrid, useExpandedRow } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n  const expansionRenderer = ({ row }) => {\n    return <div>Content for row index: {row.id}</div>;\n  };\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      ExpandedRowContentComponent: expansionRenderer,\n    },\n    useExpandedRow\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
+        code: "\nimport { Datagrid, useDatagrid, useExpandedRow } from '@carbon/ibm-products';\n\nconst App = () => {\n  const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n  const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n  const expansionRenderer = ({ row }) => {\n    return <div>Content for row index: {row.id}</div>;\n  };\n\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      ExpandedRowContentComponent: expansionRenderer,\n      expanderButtonTitleExpanded: 'Collapse row',\n      expanderButtonTitleCollapsed: 'Expand row', \n    },\n    useExpandedRow\n  );\n\n  return <Datagrid datagridState={datagridState} />;\n};\n          "
       }
     }]
   });

package/lib/components/Datagrid/useExpandedRow.js

@@ -38,7 +38,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
       return _objectSpread(_objectSpread({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
         expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        RowRenderer: (0, _DatagridExpandedRow.default)(row.RowRenderer, ExpandedRowContentComponent)
+        RowExpansionRenderer: (0, _DatagridExpandedRow.default)(ExpandedRowContentComponent)
       });
     });
     Object.assign(instance, {

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,32 +9,45 @@ exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@carbon/react/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable react/prop-types */
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(hooks) {
+  var tempState = (0, _react.useRef)();
+  var useInstance = function useInstance(instance) {
+    tempState.current = instance;
+  };
   var visibleColumns = function visibleColumns(columns) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
         var _cx;
         var row = _ref.row;
+        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
+          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
         return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
           type: "button",
-          "aria-label": "Expand current row",
+          "aria-label": expanderTitle,
           className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps()), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
+        }, row.getToggleRowExpandedProps(), {
+          title: expanderTitle
+        }), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
           className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
         }));
       },
@@ -45,6 +59,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     return [expanderColumn].concat((0, _toConsumableArray2.default)(columns));
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 var _default = useNestedRowExpander;
 exports.default = _default;

package/lib/components/Datagrid/useRowExpander.js

@@ -1,37 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@carbon/react/icons");
 var _settings = require("../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable react/prop-types */
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
+  var tempState = (0, _react.useRef)();
+  var useInstance = function useInstance(instance) {
+    tempState.current = instance;
+  };
   var visibleColumns = function visibleColumns(columns) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
+        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
+          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
         return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
           type: "button",
-          "aria-label": "Expand current row",
+          "aria-label": expanderTitle,
           className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps()), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
+        }, row.getToggleRowExpandedProps(), {
+          title: expanderTitle
+        }), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")
@@ -45,6 +59,7 @@ var useRowExpander = function useRowExpander(hooks) {
     return [expanderColumn].concat((0, _toConsumableArray2.default)(columns));
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 var _default = useRowExpander;
 exports.default = _default;

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -16,7 +16,7 @@ var _hooks = require("../Datagrid/addons/Filtering/hooks");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Datagrid/utils/DatagridPagination.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@carbon/react");
 /* eslint-disable react/prop-types */
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -93,6 +93,18 @@ var ARG_TYPES = {
     },
     description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
   },
+  expanderButtonTitleExpanded: {
+    control: {
+      type: 'text'
+    },
+    description: 'This value controls the expander title/aria-label when expanded. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expanderButtonTitleCollapsed: {
+    control: {
+      type: 'text'
+    },
+    description: 'This value controls the expander title/aria-label when expanded. _This value is set/passed inside of the `datagridState` object._'
+  },
   customizeColumnsProps: {
     control: 'object',
     description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'