@carbon/ibm-products 2.10.2 → 2.11.1

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

@@ -7,26 +7,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-// import { DndProvider } from 'react-dnd';
-// import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Checkbox } from '@carbon/react';
-// import update from 'immutability-helper';
+import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import cx from 'classnames';
 import { DraggableItemsList } from './DraggableItemsList';
+import uuidv4 from '../../../../../global/js/utils/uuidv4';
 var blockClass = "".concat(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,
@@ -36,43 +25,26 @@ var Columns = function Columns(_ref) {
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
     selectAllLabel = _ref.selectAllLabel;
+  var listId = useRef(uuidv4()); // keep id between renders
+  var listRef = useRef(null);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
     setAriaRegionText = _React$useState2[1];
-  var _React$useState3 = React.useState(-1),
-    _React$useState4 = _slicedToArray(_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.useCallback(function (from, to) {
+    var fromCol = columns[from];
+    setColumnsObject(update(columns, {
+      $splice: [[from, 1], [to, 0, fromCol]]
+    }));
+  }, [columns, setColumnsObject]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-column-list")
+    className: "".concat(blockClass, "__customize-columns-column-list"),
+    ref: listRef
   }, /*#__PURE__*/React.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.createElement("span", {
     "aria-live": "assertive",
@@ -94,16 +66,12 @@ var Columns = function Columns(_ref) {
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
   })), /*#__PURE__*/React.createElement(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/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -12,17 +15,21 @@ import { isColumnVisible } from './common';
 import DraggableElement from '../../DraggableElement';
 import { pkg } from '../../../../../settings';
 import getColTitle from '../../../utils/getColTitle';
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var matchedColsById = function matchedColsById(col1, col2) {
+  return col1 && col2 && col1.id === col2.id;
+};
 export 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.createElement(React.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 !!getColTitle(colDef);
@@ -31,7 +38,108 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
   }).filter(function (colDef) {
     var _getColTitle;
     return filterString.length === 0 || ((_getColTitle = getColTitle(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 = getColTitle(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 = getColTitle(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 = getColTitle(visibleCols[fromIndex]);
+    setAriaRegionText("".concat(colTitle, " grabbed. Original position ").concat(fromIndex + 1, ", new position ").concat(toIndex + 1, " of ").concat(visibleCols.length, "."));
+  };
+  var pointerSensor = useSensor(PointerSensor, {
+    // Require the mouse to move by 10 pixels before activating
+    activationConstraint: {
+      distance: 4
+    }
+  });
+  var keyboardSensor = useSensor(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 = useSensors(pointerSensor, keyboardSensor);
+  var handleCheckboxKeydown = function handleCheckboxKeydown(event, colDef) {
+    if (event.code === 'Space') {
+      onSelectColumn(colDef, !isColumnVisible(colDef));
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  };
+  return /*#__PURE__*/React.createElement(DndContext, {
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragUpdate,
+    sensors: sensors
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__draggable-underlay"),
+    "aria-hidden": "true",
+    key: "draggable-underlay-".concat(id)
+  }, visibleCols.map(function (colDef) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__draggable-underlay-item"),
+      key: colDef.id
+    });
+  })), /*#__PURE__*/React.createElement(SortableContext, {
+    items: visibleCols,
+    strategy: verticalListSortingStrategy
+  }, visibleCols.map(function (colDef) {
     var colHeaderTitle = getColTitle(colDef);
     var searchString = new RegExp('(' + filterString + ')');
     var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
@@ -39,7 +147,6 @@ export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       checked: isColumnVisible(colDef),
       disabled: isFrozenColumn,
       onChange: function onChange(_, _ref2) {
@@ -50,7 +157,10 @@ export 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.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: highlightedText
@@ -58,46 +168,21 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
     }));
     return /*#__PURE__*/React.createElement(DraggableElement, {
+      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: isColumnVisible(colDef)
     }, listContents);
-  }));
+  }))));
 };
 DraggableItemsList.propTypes = {
   columns: PropTypes.array.isRequired,
   filterString: PropTypes.string.isRequired,
-  focusIndex: PropTypes.number.isRequired,
-  getNextIndex: PropTypes.func.isRequired,
-  // moveElement: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  moveElement: PropTypes.func.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
-  setAriaRegionText: PropTypes.func.isRequired,
-  setColumnsObject: PropTypes.func.isRequired,
-  setFocusIndex: PropTypes.func.isRequired
+  setAriaRegionText: PropTypes.func.isRequired
 };

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

@@ -6,7 +6,7 @@ export 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/es/components/Datagrid/useExpandedRow.js

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

package/es/components/Datagrid/useNestedRowExpander.js

@@ -2,30 +2,42 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* 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 { ChevronRight } from '@carbon/react/icons';
 import cx from 'classnames';
 import { pkg, carbon } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRowExpander = function useNestedRowExpander(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 _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.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()), /*#__PURE__*/React.createElement(ChevronRight, {
+        }, row.getToggleRowExpandedProps(), {
+          title: expanderTitle
+        }), /*#__PURE__*/React.createElement(ChevronRight, {
           className: cx("".concat(blockClass, "__expander-icon"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
         }));
       },
@@ -37,5 +49,6 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     return [expanderColumn].concat(_toConsumableArray(columns));
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 export default useNestedRowExpander;

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

@@ -1,6 +1,6 @@
 /* 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/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
    */