@carbon/ibm-products 1.31.0 → 1.32.1

package/es/components/Datagrid/useActionsColumn.js

@@ -1,7 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
+var _excluded = ["id", "itemText", "onClick", "icon"],
+    _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 
 /*
  * Licensed Materials - Property of IBM
@@ -19,7 +20,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
-        isFetching = instance.isFetching;
+        isFetching = instance.isFetching,
+        selectedFlatRows = instance.selectedFlatRows;
 
     if (rowActions && Array.isArray(rowActions)) {
       var addActionsMenu = function addActionsMenu(props, cellData) {
@@ -28,7 +30,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
             column = cell.column;
 
         if (column.isAction) {
-          var _cx;
+          var _cx3;
 
           return [props, {
             children: /*#__PURE__*/React.createElement("div", {
@@ -40,26 +42,37 @@ var useActionsColumn = function useActionsColumn(hooks) {
               style: {
                 display: 'flex'
               }
-            }, rowActions.map(function (action) {
+            }, rowActions.map(function (action, index) {
               var id = action.id,
                   itemText = action.itemText,
                   _onClick = action.onClick,
-                  icon = action.icon;
+                  icon = action.icon,
+                  rest = _objectWithoutProperties(action, _excluded);
+
+              var selectedRowId = selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.filter(function (item) {
+                return item.id === row.id ? item.id : null;
+              });
               return /*#__PURE__*/React.createElement("div", {
-                className: "".concat(blockClass, "__actions-column-button"),
-                key: ""
-              }, /*#__PURE__*/React.createElement(OverflowMenu, {
+                className: cx("".concat(blockClass, "__actions-column-button"), _defineProperty({}, "".concat(blockClass, "__disabled-row-action-button"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                key: "".concat(itemText, "__").concat(index)
+              }, /*#__PURE__*/React.createElement(OverflowMenu, _extends({}, rest, {
                 renderIcon: icon,
                 hasIconOnly: true,
                 light: true,
                 iconDescription: itemText,
                 kind: "ghost",
+                className: cx(_defineProperty({}, "".concat(blockClass, "__disabled-row-action"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
                 onClick: function onClick(e) {
+                  if (selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length) {
+                    // Row actions should be disabled if row is selected and batchActions toolbar is active
+                    return;
+                  }
+
                   e.stopPropagation();
 
                   _onClick(id, row, e);
                 }
-              }));
+              })));
             })), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
               size: "sm",
               light: true,
@@ -73,7 +86,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   shouldHideMenuItem = action.shouldHideMenuItem,
                   shouldDisableMenuItem = action.shouldDisableMenuItem,
                   disabled = action.disabled,
-                  rest = _objectWithoutProperties(action, _excluded);
+                  rest = _objectWithoutProperties(action, _excluded2);
 
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row); // shouldDisableMenuItem will override disabled because it's more specific
               // if shouldDisableMenuItem doesn't exists, fall back to disabled
@@ -94,7 +107,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 key: id
               }));
             })))),
-            className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx, "".concat(blockClass, "__cell"), true), _cx))
+            className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
+            style: {
+              width: 96
+            }
           }];
         }
 

package/es/components/Datagrid/useExpandedRow.js

@@ -37,7 +37,6 @@ var useExpandedRow = function useExpandedRow(hooks) {
       return _objectSpread(_objectSpread({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
         expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        // RowRenderer: DatagridExpandedRow(row.RowRenderer, expansionRenderer),
         RowRenderer: DatagridExpandedRow(row.RowRenderer, ExpandedRowContentComponent)
       });
     });

package/es/components/Datagrid/useNestedRowExpander.js

@@ -0,0 +1,42 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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.
+ */
+import React from 'react';
+import { ChevronRight16 } from '@carbon/icons-react';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useNestedRowExpander = function useNestedRowExpander(hooks) {
+  var visibleColumns = function visibleColumns(columns) {
+    var expanderColumn = {
+      id: 'expander',
+      Cell: function Cell(_ref) {
+        var _cx;
+
+        var row = _ref.row;
+        return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), /*#__PURE__*/React.createElement(ChevronRight16, {
+          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))
+        }));
+      },
+      width: 48,
+      disableResizing: true,
+      disableSortBy: true,
+      Header: ''
+    };
+    return [expanderColumn].concat(_toConsumableArray(columns));
+  };
+
+  hooks.visibleColumns.push(visibleColumns);
+};
+
+export default useNestedRowExpander;

package/es/components/Datagrid/useNestedRows.js

@@ -5,12 +5,12 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import useRowExpander from './useRowExpander';
 import { pkg } from '../../settings';
+import useNestedRowExpander from './useNestedRowExpander';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useNestedRows = function useNestedRows(hooks) {
-  useRowExpander(hooks);
+  useNestedRowExpander(hooks);
   var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {

package/es/components/Datagrid/useSelectAllToggle.js

@@ -1,3 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -7,6 +9,7 @@
  */
 // @flow
 import React from 'react';
+import cx from 'classnames';
 import { selectionColumnId } from './common-column-ids';
 import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
 import { pkg } from '../../settings';
@@ -40,12 +43,18 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
 
 var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
   hooks.getCellProps.push(function (props, data) {
+    var _columns$;
+
     var column = data.cell.column;
-    var DatagridPagination = data.instance.DatagridPagination;
+    var _data$instance = data.instance,
+        DatagridPagination = _data$instance.DatagridPagination,
+        columns = _data$instance.columns,
+        withStickyColumn = _data$instance.withStickyColumn;
+    var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
 
     if (column.id === selectionColumnId && DatagridPagination) {
       return [props, {
-        className: "".concat(blockClass, "__select-all-toggle-on")
+        className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
       }];
     }
 
@@ -59,14 +68,18 @@ var Header = function Header(gridState) {
       selectAllToggle = gridState.selectAllToggle,
       getToggleAllPageRowsSelectedProps = gridState.getToggleAllPageRowsSelectedProps,
       getToggleAllRowsSelectedProps = gridState.getToggleAllRowsSelectedProps,
-      isAllRowsSelected = gridState.isAllRowsSelected;
+      isAllRowsSelected = gridState.isAllRowsSelected,
+      withStickyColumn = gridState.withStickyColumn,
+      columns = gridState.columns;
   var props = {
     tableId: tableId,
     isFetching: isFetching,
     selectAllToggle: selectAllToggle,
     getToggleAllPageRowsSelectedProps: getToggleAllPageRowsSelectedProps,
     getToggleAllRowsSelectedProps: getToggleAllRowsSelectedProps,
-    isAllRowsSelected: isAllRowsSelected
+    isAllRowsSelected: isAllRowsSelected,
+    withStickyColumn: withStickyColumn,
+    columns: columns
   };
   return /*#__PURE__*/React.createElement(SelectAllWithToggle, props);
 };

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

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { DataTable, Button } from 'carbon-components-react';
+import { Download16, Filter16, Add16, Restart16 } from '@carbon/icons-react';
+import { action } from '@storybook/addon-actions';
+import { pkg } from '../../../settings';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridActions = function DatagridActions(datagridState) {
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      setGlobalFilter = datagridState.setGlobalFilter,
+      CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
+      RowSizeDropdown = datagridState.RowSizeDropdown,
+      rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
+      useDenseHeader = datagridState.useDenseHeader;
+
+  var downloadCsv = function downloadCsv() {
+    alert('Downloading...');
+  };
+
+  var TableToolbarContent = DataTable.TableToolbarContent,
+      TableToolbarSearch = DataTable.TableToolbarSearch;
+
+  var refreshColumns = function refreshColumns() {
+    alert('refreshing...');
+  };
+
+  var leftPanelClick = function leftPanelClick() {
+    alert('open/close left panel...');
+  };
+
+  var searchForAColumn = 'Search';
+  var isNothingSelected = selectedFlatRows.length === 0;
+  var style = {
+    'button:nth-child(1) > span:nth-child(1)': {
+      bottom: '-37px'
+    }
+  };
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/React.createElement(TableToolbarContent, {
+    size: "sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  })), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    renderIcon: Add16,
+    iconDescription: 'Action'
+  }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  }), /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Restart16,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
+    label: "Primary button",
+    renderIcon: Add16
+  }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: action("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: action("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: action("Click on ButtonMenu Option 3")
+  })))));
+};

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

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 { Pagination } from 'carbon-components-react';
+export var DatagridPagination = function DatagridPagination(_ref) {
+  var state = _ref.state,
+      setPageSize = _ref.setPageSize,
+      gotoPage = _ref.gotoPage,
+      rows = _ref.rows;
+
+  var updatePagination = function updatePagination(_ref2) {
+    var page = _ref2.page,
+        pageSize = _ref2.pageSize;
+    console.log(state);
+    setPageSize(pageSize);
+    gotoPage(page - 1); // Carbon is non-zero-based
+  };
+
+  return /*#__PURE__*/React.createElement(Pagination, {
+    page: state.pageIndex + 1 // react-table is zero-based
+    ,
+    pageSize: state.pageSize,
+    pageSizes: state.pageSizes || [10, 20, 30, 40, 50],
+    totalItems: rows.length,
+    onChange: updatePagination
+  });
+};

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

@@ -0,0 +1,21 @@
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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';
+export var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};

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

@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export var ARG_TYPES = {
+  gridTitle: {
+    name: 'gridTitle',
+    control: 'text',
+    description: 'This sets the title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  gridDescription: {
+    name: 'gridDescription',
+    control: 'text',
+    description: 'This sets the description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateTitle: {
+    name: 'emptyStateTitle',
+    control: 'text',
+    description: 'This sets the empty state title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateDescription: {
+    name: 'emptyStateDescription',
+    control: 'text',
+    description: 'This sets the empty state description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateSize: {
+    control: 'select',
+    options: ['sm', 'lg']
+  },
+  useDenseHeader: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This sets the dense header option for the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSize: {
+    control: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    description: 'This sets the height for each row of the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSizes: {
+    control: 'object',
+    description: 'This array of objects specifies the different row size options that will render from the settings icon in the table actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  onRowSizeChange: {
+    description: 'Callback function that is called on row size changes. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowActions: {
+    control: 'object',
+    description: 'This array of objects renders the action buttons for each row in the Datagrid. _This value is set/passed inside of the `datagridState` object._',
+    action: 'Row action onClick'
+  },
+  batchActions: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This will allow the Datagrid component to use batch actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expandedContentHeight: {
+    control: {
+      type: 'number'
+    },
+    description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  }
+};

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

@@ -12,12 +12,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React from 'react';
 import namor from 'namor';
+import { StatusIcon } from '../../StatusIcon';
 import { inlineEditSelectItems } from './getInlineEditColumns';
 
-var getRandomInteger = function getRandomInteger(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
+var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
+  var roundedMin = Math.ceil(min);
+  var roundedMax = Math.floor(max);
+  var randomNumber = Math.random() * (max - min) + min;
+
+  if (!decimalPlaces) {
+    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
+  }
+
+  var power = Math.pow(10, decimalPlaces);
+  return Math.floor(randomNumber * power) / power;
 };
 
 export var makeData = function makeData() {
@@ -47,6 +55,16 @@ export var range = function range(len) {
   return arr;
 };
 
+var renderStatusIcon = function renderStatusIcon(statusChance) {
+  var iconProps = {
+    size: 'sm',
+    theme: 'light',
+    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
+    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
+  };
+  return /*#__PURE__*/React.createElement(StatusIcon, iconProps);
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
@@ -149,7 +167,9 @@ var newPerson = function newPerson() {
     }),
     status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
+    status_icon: renderStatusIcon(statusChance)
   };
 };
 

package/es/components/InlineEdit/InlineEdit.js

@@ -40,7 +40,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -66,7 +66,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var refInput = useRef({
-    innerText: value
+    textContent: value
   });
   var localRef = useRef(null);
   var ref = refIn || localRef;
@@ -148,15 +148,15 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -191,7 +191,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -259,7 +259,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/React.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
       id: id,
       size: size,
-      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: cx("".concat(blockClass, "__input"), _defineProperty({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",

package/es/components/OptionsTile/OptionsTile.js

@@ -202,12 +202,14 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/React.createElement("h6", {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: "".concat(blockClass, "__title"),
+      title: title
     }, title), text && /*#__PURE__*/React.createElement("span", {
       className: cx(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: "".concat(blockClass, "__summary-text"),
+      title: text
     }, text)));
   }
 

package/es/global/js/utils/story-helper.js

@@ -29,7 +29,11 @@ export var getStoryTitle = function getStoryTitle(componentName) {
  * @returns The story id.
  */
 
-export var getStoryId = function getStoryId(componentName, scenario) {
+export var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat(sanitize(getStoryTitle(componentName)), "-").concat(sanitize(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat(sanitize(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -897,6 +897,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: (0, _classnames.default)("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
   }, activeCellContent), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextArea, {
+    id: "".concat(blockClass, "__cell-editor-text-area"),
     value: cellEditorValue,
     onKeyDown: (0, _handleEditSubmit.handleEditSubmit)({
       activeCellCoordinates: activeCellCoordinates,

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -411,7 +411,8 @@ var DataSpreadsheetBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       }), {
         className: (0, _classnames.default)("".concat(blockClass, "__tr")),
         "data-row-index": index,
-        "aria-rowindex": index + 1
+        "aria-rowindex": index + 1,
+        "aria-owns": "".concat(blockClass, "__cell-editor-text-area")
       }), /*#__PURE__*/_react.default.createElement("div", {
         role: "rowheader",
         className: "".concat(blockClass, "__td-th--cell-container")

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -80,7 +80,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     };
   }, []);
   (0, _react.useEffect)(function () {
-    if (containerHasFocus && !isEditing) {
+    if (ref && containerHasFocus && !isEditing) {
       ref.current.onkeydown = ref.current.onkeyup = function (event) {
         // If keydown, we will add the new key to the keysPressedList array
         if (event.type === 'keydown') {
@@ -132,7 +132,7 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     // or is currently in edit mode
 
 
-    if (!containerHasFocus || isEditing) {
+    if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;