@carbon/ibm-products 2.11.0 → 2.11.2

package/es/components/Datagrid/useRowExpander.js

@@ -1,29 +1,41 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 /* 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.
  */
-import React from 'react';
+
+import React, { useRef } from 'react';
 import { ChevronDown, ChevronUp } from '@carbon/react/icons';
 import { pkg, carbon } from '../../settings';
 import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
+  var tempState = 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.createElement("button", _extends({
           type: "button",
-          "aria-label": "Expand current row",
+          "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps()), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp, {
+        }, row.getToggleRowExpandedProps(), {
+          title: expanderTitle
+        }), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React.createElement(ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")
@@ -37,5 +49,6 @@ var useRowExpander = function useRowExpander(hooks) {
     return [expanderColumn].concat(_toConsumableArray(columns));
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 export default useRowExpander;

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * 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/es/components/Datagrid/utils/getArgTypes.js

@@ -87,6 +87,18 @@ export 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._'

package/es/components/EditTearsheet/EditTearsheet.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick"];
+var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onHandleModalClick", "onFormChange", "sideNavAriaLabel"];
 /**
- * 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.
@@ -31,7 +31,8 @@ export var FormNumberContext = /*#__PURE__*/createContext(0);
 // Default values for props
 var defaults = {
   verticalPosition: 'normal',
-  influencerWidth: 'narrow'
+  influencerWidth: 'narrow',
+  sideNavAriaLabel: 'Side navigation'
 };
 
 /**
@@ -52,40 +53,43 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
     onHandleModalClick = _ref.onHandleModalClick,
+    onFormChange = _ref.onFormChange,
+    _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
+    sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentForm = _useState2[0],
     setCurrentForm = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    formTitles = _useState4[0],
+    setFormTitles = _useState4[1];
   var contentRef = useRef();
-  var handleCurrentForm = function handleCurrentForm(form) {
-    setCurrentForm(form);
+  var handleCurrentForm = function handleCurrentForm(formIndex) {
+    setCurrentForm(formIndex);
+    if (onFormChange) {
+      onFormChange(formIndex);
+    }
   };
-  var sideNavItems = [{
-    label: 'Topic Name'
-  }, {
-    label: 'Location'
-  }, {
-    label: 'Partitions'
-  }, {
-    label: 'Message retention'
-  }];
-  var influencer = /*#__PURE__*/React.createElement("div", {
-    className: "tearsheet-stories__dummy-influencer-block"
-  }, /*#__PURE__*/React.createElement(SideNav, {
-    "aria-label": "Side navigation",
-    className: "".concat(blockClass, "__side-nav"),
-    expanded: true,
-    isFixedNav: false
-  }, /*#__PURE__*/React.createElement(SideNavItems, null, sideNavItems.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(SideNavMenuItem, {
-      key: index,
-      onClick: function onClick() {
-        return handleCurrentForm(index);
-      },
-      isActive: currentForm === index
-    }, item.label);
-  }))));
+  function defaultInfluencer() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__side-nav-wrapper")
+    }, /*#__PURE__*/React.createElement(SideNav, {
+      "aria-label": sideNavAriaLabel,
+      className: "".concat(blockClass, "__side-nav"),
+      expanded: true,
+      isFixedNav: false
+    }, /*#__PURE__*/React.createElement(SideNavItems, null, formTitles.map(function (title, index) {
+      return /*#__PURE__*/React.createElement(SideNavMenuItem, {
+        key: index,
+        onClick: function onClick() {
+          return handleCurrentForm(index);
+        },
+        isActive: currentForm === index
+      }, title);
+    }))));
+  }
   return /*#__PURE__*/React.createElement(TearsheetShell, _extends({}, rest, getDevtoolsProps(componentName), {
     actions: [{
       label: submitButtonText,
@@ -99,7 +103,7 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: cx(blockClass, className),
     description: description,
     hasCloseIcon: false,
-    influencer: influencer,
+    influencer: defaultInfluencer(),
     influencerPosition: "left",
     influencerWidth: influencerWidth,
     label: label,
@@ -115,7 +119,8 @@ export var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     role: "main"
   }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {
-      currentForm: currentForm
+      currentForm: currentForm,
+      setFormTitles: setFormTitles
     }
   }, React.Children.map(children, function (child, index) {
     return /*#__PURE__*/React.createElement(FormNumberContext.Provider, {
@@ -150,12 +155,6 @@ EditTearsheet.propTypes = {
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: PropTypes.node,
-  /**
-   * The content for the influencer section of the tearsheet, displayed
-   * alongside the main content. This is typically a menu, or filter, or
-   * progress indicator, or similar.
-   */
-  influencer: PropTypes.element,
   /**
    * Used to set the size of the influencer
    */
@@ -172,6 +171,12 @@ EditTearsheet.propTypes = {
    * Returning `false` here prevents the modal from closing.
    */
   onClose: PropTypes.func,
+  /**
+   * An optional handler that is called when a user changes forms via clicking
+   * an influencer nav item.
+   * Returns the index of the selected form.
+   */
+  onFormChange: PropTypes.func,
   /**
    * Specifies whether the tearsheet is currently open.
    */
@@ -180,6 +185,10 @@ EditTearsheet.propTypes = {
    * Specifies whether the tearsheet is currently open.
    */
   open: PropTypes.bool,
+  /**
+   * Specifies the aria label for the SideNav from Carbon UIShell
+   */
+  sideNavAriaLabel: PropTypes.string,
   /**
    * The submit button text
    */

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -16,6 +16,7 @@ import { Column, FormGroup, Grid } from '@carbon/react';
 import { FormContext, FormNumberContext } from './EditTearsheet';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
+import { useRetrieveFormTitles } from '../../global/js/hooks/useRetrieveFormTitles';
 var componentName = 'EditTearsheetForm';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-edit__form");
 
@@ -36,6 +37,11 @@ export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var formContext = useContext(FormContext);
   var formNumber = useContext(FormNumberContext);
+  useRetrieveFormTitles({
+    formContext: formContext,
+    formNumber: formNumber,
+    title: title
+  });
   return formContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _defineProperty(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
     ref: ref

package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -13,6 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { EditTearsheet } from '../EditTearsheet';
 import { EditTearsheetForm } from '../EditTearsheetForm';
+import { action } from '@storybook/addon-actions';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-edit-multi-form");
 export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
   var cancelButtonText = _ref.cancelButtonText,
@@ -72,6 +73,9 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
   var handleModalClick = function handleModalClick() {
     setOpen(!open);
   };
+  var handleFormChange = function handleFormChange() {
+    action('handleFormChange')();
+  };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
     onClick: handleModalClick
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/React.createElement(EditTearsheet, {
@@ -84,7 +88,8 @@ export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     title: title,
     open: open,
     onHandleModalClick: handleModalClick,
-    onClose: clearCreateData
+    onClose: clearCreateData,
+    onFormChange: handleFormChange
   }, /*#__PURE__*/React.createElement(EditTearsheetForm, {
     title: "Topic name",
     fieldsetLegendText: "Topic information",

package/es/components/Saving/Saving.js

@@ -39,7 +39,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
       text: defaultText,
       iconDescription: defaultIconDescription,
       icon: function icon(props) {
-        return /*#__PURE__*/React.createElement(CheckmarkOutline, _extends({
+        return /*#__PURE__*/React.createElement(Save, _extends({
           size: 16
         }, props));
       }
@@ -56,7 +56,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
-      return /*#__PURE__*/React.createElement(Save, _extends({
+      return /*#__PURE__*/React.createElement(CheckmarkOutline, _extends({
         size: 16
       }, props));
     }

package/es/components/Tearsheet/Tearsheet.js

@@ -176,9 +176,9 @@ Tearsheet.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
    */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -142,9 +142,9 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -383,9 +383,9 @@ TearsheetShell.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

package/es/global/js/hooks/useRetrieveFormTitles.js

@@ -0,0 +1,20 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { useEffect } from 'react';
+export var useRetrieveFormTitles = function useRetrieveFormTitles(_ref) {
+  var formContext = _ref.formContext,
+    formNumber = _ref.formNumber,
+    title = _ref.title;
+  useEffect(function () {
+    if (formContext) {
+      formContext.setFormTitles(function (prev) {
+        var prevTitle = prev[formNumber];
+        if (prevTitle !== title) {
+          var clone = _toConsumableArray(prev);
+          clone[formNumber] = title;
+          return clone;
+        }
+        return prev;
+      });
+    }
+  }, [title, formContext, formNumber]);
+};

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -16,7 +16,7 @@ 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; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2021, 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.
@@ -83,39 +83,41 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
     if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
-      return null;
+      return;
     }
-    return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
-      label: "More",
-      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
-    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2) {
-        if (displayAllInMenu) {
-          return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
-            key: "".concat(batchAction.label, "-").concat(index),
-            label: batchAction.label,
-            onClick: function onClick(event) {
-              batchAction.onClick(getSelectedRowData(), event);
-              if (batchAction.type === 'select_all') {
-                toggleAllRowsSelected(true);
-              }
-            }
-          });
-        }
-        return null;
-      }
+    var renderItem = function renderItem(batchAction, index) {
       return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),
         label: batchAction.label,
         onClick: function onClick(event) {
-          batchAction.onClick(getSelectedRowData(), event);
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
-          }
+          return onClickHandler(event, batchAction);
         }
       });
+    };
+    return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
+      label: "More",
+      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2 && !displayAllInMenu) {
+        return;
+      }
+      return renderItem(batchAction, index);
     }));
   };
+  var onClickHandler = function onClickHandler(event, batchAction) {
+    batchAction.onClick(getSelectedRowData(), event);
+    if (batchAction.type === 'select_all') {
+      toggleAllRowsSelected(true);
+    }
+  };
+  var onCancelHandler = function onCancelHandler() {
+    toggleAllRowsSelected(false);
+    setGlobalFilter(null);
+  };
+  var onSelectAllHandler = function onSelectAllHandler() {
+    toggleAllRowsSelected(true);
+    onSelectAllRows === null || onSelectAllRows === void 0 || onSelectAllRows(true);
+  };
 
   // Only display the first two batch actions, the rest are
   // displayed inside of the ButtonMenu if there are more than
@@ -123,14 +125,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   return /*#__PURE__*/_react.default.createElement(_react2.TableBatchActions, {
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
-    onCancel: function onCancel() {
-      toggleAllRowsSelected(false);
-      setGlobalFilter(null);
-    },
-    onSelectAll: function onSelectAll() {
-      toggleAllRowsSelected(true);
-      onSelectAllRows === null || onSelectAllRows === void 0 || onSelectAllRows(true);
-    },
+    onCancel: onCancelHandler,
+    onSelectAll: onSelectAllHandler,
     totalCount: rows && rows.length
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
@@ -138,10 +134,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
         onClick: function onClick(event) {
-          batchAction.onClick(getSelectedRowData(), event);
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
-          }
+          return onClickHandler(batchAction, event);
         },
         iconDescription: batchAction.label
       }, batchAction.label);

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

@@ -82,6 +82,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
   var onRequestClose = function onRequestClose() {
+    setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
   };
   var onRequestSubmit = function onRequestSubmit() {

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/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.