carbon-addons-iot-react 5.5.2 → 5.6.4

package/es/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.js

@@ -7,6 +7,7 @@ import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.sort.js';
 import 'core-js/modules/es.number.constructor.js';
@@ -312,9 +313,20 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
   });
   var initialAggregation = matchedDataItem === null || matchedDataItem === void 0 ? void 0 : matchedDataItem.aggregationMethod;
   var initialGrain = matchedDataItem === null || matchedDataItem === void 0 ? void 0 : matchedDataItem.grain;
-  var selectedDimensionFilter = editDataItem.dataFilter ? Object.keys(editDataItem.dataFilter)[0] : '';
+  var selectedDimensionFilter = useMemo(function () {
+    return editDataItem.dataFilter ? Object.keys(editDataItem.dataFilter)[0] : '';
+  }, [editDataItem.dataFilter]);
+  var availableDimensionsItems = useMemo(function () {
+    var _availableDimensions$;
+    return selectedDimensionFilter && ((_availableDimensions$ = availableDimensions[selectedDimensionFilter]) === null || _availableDimensions$ === void 0 ? void 0 : _availableDimensions$.sort().map(function (item) {
+      return {
+        id: item,
+        text: item.toString()
+      };
+    })) || [];
+  }, [availableDimensions, selectedDimensionFilter]);
   var DataEditorContent = useMemo(function () {
-    var _editDataItem$aggrega, _editDataItem$aggrega2, _editDataItem$precisi, _availableDimensions$;
+    var _editDataItem$aggrega, _editDataItem$aggrega2, _editDataItem$precisi;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hasAggregationsDropDown && hasAggregationsDropDown(editDataItem) && /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(baseClassName, "--input-group")
     }, !initialAggregation || !isSummaryDashboard ?
@@ -494,19 +506,22 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       autoAlign: true
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(baseClassName, "--input-group--item")
-    }, !isEmpty(editDataItem.dataFilter) && availableDimensions[selectedDimensionFilter] && /*#__PURE__*/React__default.createElement(Dropdown, {
+    }, !isEmpty(editDataItem.dataFilter) && (availableDimensionsItems === null || availableDimensionsItems === void 0 ? void 0 : availableDimensionsItems.length) > 0 && /*#__PURE__*/React__default.createElement(Dropdown, {
       id: "".concat(id, "_data-filter-value"),
       label: "",
       direction: "bottom",
-      items: (_availableDimensions$ = availableDimensions[selectedDimensionFilter]) === null || _availableDimensions$ === void 0 ? void 0 : _availableDimensions$.sort(),
+      items: availableDimensionsItems,
       light: true,
       itemToString: function itemToString(item) {
-        return item === null || item === void 0 ? void 0 : item.toString();
+        return item ? item.text : '';
       },
-      selectedItem: editDataItem.dataFilter ? editDataItem.dataFilter[selectedDimensionFilter] : undefined,
+      selectedItem: availableDimensionsItems.find(function (item) {
+        var _editDataItem$dataFil;
+        return item.id === ((_editDataItem$dataFil = editDataItem.dataFilter) === null || _editDataItem$dataFil === void 0 ? void 0 : _editDataItem$dataFil[selectedDimensionFilter]);
+      }),
       onChange: function onChange(_ref9) {
         var selectedItem = _ref9.selectedItem;
-        var dataFilter = _defineProperty({}, selectedDimensionFilter, selectedItem);
+        var dataFilter = _defineProperty({}, selectedDimensionFilter, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id);
         setEditDataItem(_objectSpread(_objectSpread({}, editDataItem), {}, {
           dataFilter: dataFilter
         }));
@@ -536,7 +551,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       },
       columnType: editDataItem.columnType || editDataItem.type
     }));
-  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
+  }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showEditor && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--modal-wrapper")
   }, /*#__PURE__*/React__default.createElement(ComposedModal, {

package/es/components/SidePanel/SidePanel.js

@@ -62,7 +62,11 @@ var propTypes = {
   /** Toggle side panel busy state */
   isBusy: PropTypes.bool,
   /** should the footer primary button be disabled */
-  isPrimaryButtonDisabled: PropTypes.bool
+  isPrimaryButtonDisabled: PropTypes.bool,
+  /** Custom width in pixels for the side panel (e.g., 400, '400px', or '25rem') */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Custom background color for the side panel (e.g., '#f4f4f4', 'gray', or any valid CSS color) */
+  backgroundColor: PropTypes.string
 };
 var defaultProps = {
   isOpen: false,
@@ -84,7 +88,9 @@ var defaultProps = {
   onPrimaryButtonClick: undefined,
   onSecondaryButtonClick: undefined,
   isBusy: false,
-  isPrimaryButtonDisabled: false
+  isPrimaryButtonDisabled: false,
+  width: undefined,
+  backgroundColor: undefined
 };
 var baseClass = "".concat(iotPrefix, "--sidepanel");
 var SidePanel = function SidePanel(_ref) {
@@ -104,7 +110,9 @@ var SidePanel = function SidePanel(_ref) {
     children = _ref.children,
     style = _ref.style,
     isBusy = _ref.isBusy,
-    isPrimaryButtonDisabled = _ref.isPrimaryButtonDisabled;
+    isPrimaryButtonDisabled = _ref.isPrimaryButtonDisabled,
+    width = _ref.width,
+    backgroundColor = _ref.backgroundColor;
   var titleRef = useRef();
   var subtitleRef = useRef();
   var contentRef = useRef();
@@ -192,11 +200,24 @@ var SidePanel = function SidePanel(_ref) {
     }
     return "".concat(str.substring(0, length), "...");
   };
+  var panelWidth = useMemo(function () {
+    if (width !== undefined) {
+      return typeof width === 'number' ? "".concat(width, "px") : width;
+    }
+    return undefined;
+  }, [width]);
+  var panelStyle = useMemo(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, style), panelWidth && {
+      width: panelWidth
+    }), backgroundColor && {
+      backgroundColor: backgroundColor
+    });
+  }, [style, panelWidth, backgroundColor]);
   return /*#__PURE__*/React__default.createElement("div", {
     key: "sidePanel--".concat(subtitle),
     "data-testid": testId,
     className: classnames("".concat(baseClass), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClass, "--closed"), !isOpen), "".concat(baseClass, "--full-width"), isFullWidth), "".concat(baseClass, "--start"), direction === 'left'), "".concat(baseClass, "--inline"), type === 'inline'), "".concat(baseClass, "--slide-over"), type === 'over'), "".concat(baseClass, "--condensed"), isCondensed || isScrolled)),
-    style: style
+    style: panelStyle
   }, onToggle && (isOpen || type === 'inline') ? /*#__PURE__*/React__default.createElement(Button, {
     testId: "".concat(testId, "-toggle-button"),
     hasIconOnly: true,
@@ -490,6 +511,33 @@ SidePanel.__docgenInfo = {
         "name": "bool"
       },
       "required": false
+    },
+    "width": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "description": "Custom width in pixels for the side panel (e.g., 400, '400px', or '25rem')",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false
+    },
+    "backgroundColor": {
+      "defaultValue": {
+        "value": "undefined",
+        "computed": true
+      },
+      "description": "Custom background color for the side panel (e.g., '#f4f4f4', 'gray', or any valid CSS color)",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };

package/es/components/Table/Table.js

@@ -58,7 +58,7 @@ import ErrorTable from './ErrorTable/ErrorTable.js';
 import { PIN_COLUMN } from './tableUtilities.js';
 import { FilterEdit } from '@carbon/icons-react';
 
-var _excluded = ["id", "columns", "enablePercentageColumnWidth", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex", "emptyStateIcon"],
+var _excluded = ["id", "columns", "enablePercentageColumnWidth", "columnGroups", "data", "expandedData", "locale", "view", "actions", "actions", "options", "lightweight", "className", "style", "i18n", "secondaryTitle", "tooltip", "error", "testId", "size", "zIndex", "emptyStateIcon", "deletedAttribute"],
   _excluded2 = ["renderIcon"],
   _excluded3 = ["error"],
   _excluded4 = ["maxPages"];
@@ -393,7 +393,9 @@ var propTypes = {
   /** Specify the error message that need to be displayed by default.
    * Incase we use view.table.errorState property then the error state will be displayed instead of error message */
   error: PropTypes.string,
-  testId: PropTypes.string
+  testId: PropTypes.string,
+  /** Attribute name to identify deleted rows */
+  deletedAttribute: PropTypes.string
 };
 var defaultProps = function defaultProps(baseProps) {
   return {
@@ -592,6 +594,7 @@ var defaultProps = function defaultProps(baseProps) {
       multiSortDescending: 'Descending',
       multiSortOverflowItem: 'Multi-sort',
       multiSortDragHandle: 'Drag handle',
+      dragHandleTooltip: 'Click and drag to new location',
       // table error state
       tableErrorStateTitle: 'Unable to load the page',
       buttonLabelOnTableError: 'Refresh the page',
@@ -612,7 +615,8 @@ var defaultProps = function defaultProps(baseProps) {
     // previously used as testId.
     testId: null,
     enablePercentageColumnWidth: false,
-    emptyStateIcon: ''
+    emptyStateIcon: '',
+    deletedAttribute: undefined
   };
 };
 var Table = function Table(props) {
@@ -640,6 +644,7 @@ var Table = function Table(props) {
     size = _merge2.size,
     zIndex = _merge2.zIndex,
     emptyStateIcon = _merge2.emptyStateIcon,
+    deletedAttribute = _merge2.deletedAttribute,
     others = _objectWithoutProperties(_merge2, _excluded);
 
   // There is no way to access the current search value in the Table
@@ -1005,7 +1010,7 @@ var Table = function Table(props) {
     selectedIds: view.table.selectedIds,
     loadingMoreIds: view.table.loadingMoreIds,
     zIndex: zIndex
-  }, _pick(i18n, 'overflowMenuAria', 'clickToExpandAria', 'clickToCollapseAria', 'inProgressText', 'actionFailedText', 'learnMoreText', 'dismissText', 'selectRowAria', 'loadMoreText'), {
+  }, _pick(i18n, 'overflowMenuAria', 'clickToExpandAria', 'clickToCollapseAria', 'inProgressText', 'actionFailedText', 'learnMoreText', 'dismissText', 'selectRowAria', 'loadMoreText', 'dragHandleTooltip'), {
     totalColumns: totalColumns
   }, _pick(options, 'hasRowSelection', 'hasRowActions', 'hasRowNesting', 'shouldExpandOnRowClick', 'shouldLazyRender', 'preserveCellWhiteSpace', 'useRadioButtonSingleSelect', 'hasDragAndDrop', 'hasBreadcrumbDrop'), {
     hideDragHandles: hideDragHandles,
@@ -1020,7 +1025,8 @@ var Table = function Table(props) {
     testId: "".concat(id || testId, "-table-body"),
     showExpanderColumn: showExpanderColumn,
     size: size,
-    pinColumn: options.pinColumn
+    pinColumn: options.pinColumn,
+    deletedAttribute: deletedAttribute
   })) : /*#__PURE__*/React__default.createElement(EmptyTable, {
     id: id,
     totalColumns: totalColumns,
@@ -2027,6 +2033,13 @@ Table.__docgenInfo = {
         "name": "string"
       },
       "required": false
+    },
+    "deletedAttribute": {
+      "description": "Attribute name to identify deleted rows",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };

package/es/components/Table/TableBody/TableBody.js

@@ -57,6 +57,8 @@ var propTypes = {
   dismissText: PropTypes.string,
   /** I18N label for load more */
   loadMoreText: PropTypes.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes.string,
   /** since some columns might not be currently visible */
   totalColumns: PropTypes.number,
   hasRowSelection: PropTypes.oneOf(['multi', 'single', false]),
@@ -118,7 +120,9 @@ var propTypes = {
   /** Optional base z-index for the drag image. See details on Table component. */
   zIndex: PropTypes.number,
   /** column to pin in the table */
-  pinColumn: PinColumnPropTypes
+  pinColumn: PinColumnPropTypes,
+  /** Attribute name to identify deleted rows */
+  deletedAttribute: PropTypes.string
 };
 var defaultProps = {
   expandedIds: [],
@@ -152,12 +156,14 @@ var defaultProps = {
   inProgressText: 'In progress',
   dismissText: 'Dismiss',
   actionFailedText: 'Action failed',
+  dragHandleTooltip: 'Click and drag to new location',
   size: undefined,
   hasDragAndDrop: false,
   hasBreadcrumbDrop: false,
   hideDragHandles: false,
   zIndex: 0,
-  pinColumn: PIN_COLUMN.NONE
+  pinColumn: PIN_COLUMN.NONE,
+  deletedAttribute: '_deleted'
 };
 var TableBody = function TableBody(_ref) {
   var tableId = _ref.tableId,
@@ -176,6 +182,7 @@ var TableBody = function TableBody(_ref) {
     dismissText = _ref.dismissText,
     actionFailedText = _ref.actionFailedText,
     loadMoreText = _ref.loadMoreText,
+    dragHandleTooltip = _ref.dragHandleTooltip,
     totalColumns = _ref.totalColumns,
     actions = _ref.actions,
     rowActionsState = _ref.rowActionsState,
@@ -202,7 +209,8 @@ var TableBody = function TableBody(_ref) {
     hasBreadcrumbDrop = _ref.hasBreadcrumbDrop,
     hideDragHandles = _ref.hideDragHandles,
     zIndex = _ref.zIndex,
-    pinColumn = _ref.pinColumn;
+    pinColumn = _ref.pinColumn,
+    deletedAttribute = _ref.deletedAttribute;
   // Need to merge the ordering and the columns since the columns have the renderer function
   var orderingMap = useMemo(function () {
     return ordering.map(function (col) {
@@ -316,6 +324,7 @@ var TableBody = function TableBody(_ref) {
       clickToExpandAria: clickToExpandAria,
       columns: columns,
       dismissText: dismissText,
+      dragHandleTooltip: dragHandleTooltip,
       expandedIds: expandedIds,
       expandedRows: expandedRows,
       hasRowActions: hasRowActions,
@@ -325,6 +334,7 @@ var TableBody = function TableBody(_ref) {
       useRadioButtonSingleSelect: useRadioButtonSingleSelect,
       indeterminateSelectionIds: getIndeterminateRowSelectionIds(rows, selectedIds),
       inProgressText: inProgressText,
+      isDragging: isDragging,
       langDir: langDir,
       learnMoreText: learnMoreText,
       loadingMoreIds: loadingMoreIds,
@@ -357,7 +367,8 @@ var TableBody = function TableBody(_ref) {
       onDragEnterRow: isDragging ? handleEnterRow : null,
       onDragLeaveRow: isDragging ? handleLeaveRow : null,
       dragRowIds: dragRowIds,
-      canDropRowIds: canDropRowIds
+      canDropRowIds: canDropRowIds,
+      deletedAttribute: deletedAttribute
     });
   })), dragPreview);
 };
@@ -751,6 +762,17 @@ TableBody.__docgenInfo = {
       },
       "required": false
     },
+    "dragHandleTooltip": {
+      "defaultValue": {
+        "value": "'Click and drag to new location'",
+        "computed": false
+      },
+      "description": "I18N label for drag handle tooltip",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "size": {
       "defaultValue": {
         "value": "undefined",
@@ -834,6 +856,17 @@ TableBody.__docgenInfo = {
       },
       "required": false
     },
+    "deletedAttribute": {
+      "defaultValue": {
+        "value": "'_deleted'",
+        "computed": false
+      },
+      "description": "Attribute name to identify deleted rows",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "tableId": {
       "description": "The unique id of the table",
       "type": {

package/es/components/Table/TableBody/TableBodyRow/TableBodyRow.js

@@ -46,6 +46,8 @@ var propTypes = {
   clickToExpandAria: PropTypes.string,
   /** internationalized label  */
   clickToCollapseAria: PropTypes.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes.string,
   /** List of columns */
   columns: TableColumnsPropTypes.isRequired,
   /** table wide options */
@@ -137,8 +139,12 @@ var propTypes = {
   isDraggable: PropTypes.bool,
   /** If this row is being dragged. */
   isDragRow: PropTypes.bool,
+  /** If a drag operation is currently in progress. */
+  isDragging: PropTypes.bool,
   /** If all drag handles should be hidden. This happens when an undraggable row is in the selection. */
-  hideDragHandles: PropTypes.bool
+  hideDragHandles: PropTypes.bool,
+  /** Attribute name to identify deleted rows */
+  deletedAttribute: PropTypes.string
 };
 var defaultProps = {
   isSelected: false,
@@ -148,6 +154,7 @@ var defaultProps = {
   overflowMenuAria: 'More actions',
   clickToExpandAria: 'Click to expand.',
   clickToCollapseAria: 'Click to collapse.',
+  dragHandleTooltip: 'Click and drag to new location',
   rowActions: null,
   rowDetails: null,
   nestingLevel: 0,
@@ -174,7 +181,9 @@ var defaultProps = {
   onDragEnterRow: null,
   onDragLeaveRow: null,
   isDraggable: false,
-  isDragRow: false
+  isDragRow: false,
+  isDragging: false,
+  deletedAttribute: '_deleted'
 };
 var TableBodyRow = function TableBodyRow(_ref) {
   var id = _ref.id,
@@ -207,6 +216,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     overflowMenuAria = _ref.overflowMenuAria,
     clickToExpandAria = _ref.clickToExpandAria,
     clickToCollapseAria = _ref.clickToCollapseAria,
+    dragHandleTooltip = _ref.dragHandleTooltip,
     inProgressText = _ref.inProgressText,
     actionFailedText = _ref.actionFailedText,
     learnMoreText = _ref.learnMoreText,
@@ -230,8 +240,10 @@ var TableBodyRow = function TableBodyRow(_ref) {
     onDragLeaveRow = _ref.onDragLeaveRow,
     isDragRow = _ref.isDragRow,
     isDraggable = _ref.isDraggable,
+    isDragging = _ref.isDragging,
     hasDragAndDrop = _ref.hasDragAndDrop,
-    hideDragHandles = _ref.hideDragHandles;
+    hideDragHandles = _ref.hideDragHandles,
+    deletedAttribute = _ref.deletedAttribute;
   var isEditMode = rowEditMode || singleRowEditMode;
   var singleSelectionIndicatorWidth = hasRowSelection === 'single' ? 0 : 5;
   var nestingLevelPixels = nestingLevel * 32;
@@ -285,7 +297,9 @@ var TableBodyRow = function TableBodyRow(_ref) {
     className: "".concat(iotPrefix, "--table-grab-handle-cell")
   }, !isDraggable || hideDragHandles ? null : /*#__PURE__*/React__default.createElement(TableDragHandle, {
     onStartDrag: onStartDrag,
-    rowId: id
+    rowId: id,
+    isDragging: isDragging,
+    tooltipText: dragHandleTooltip
   }));
   var firstVisibleColIndex = ordering.findIndex(function (col) {
     return !col.isHidden;
@@ -374,7 +388,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     key: id
   }, /*#__PURE__*/React__default.createElement(TableExpandRow, _extends({
     expandHeaderId: "".concat(tableId, "-expand"),
-    className: classnames("".concat(iotPrefix, "--expandable-tablerow--expanded"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values._deleted)),
+    className: classnames("".concat(iotPrefix, "--expandable-tablerow--expanded"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values[deletedAttribute])),
     ariaLabel: clickToCollapseAria,
     expandIconDescription: clickToCollapseAria,
     isExpanded: true,
@@ -402,13 +416,13 @@ var TableBodyRow = function TableBodyRow(_ref) {
     rowId: id,
     langDir: langDir
   }, dragEnterLeaveHandlers), tableCells), !hasRowNesting && /*#__PURE__*/React__default.createElement(TableRow, _extends({
-    className: classnames("".concat(iotPrefix, "--expanded-tablerow"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expanded-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values._deleted))
+    className: classnames("".concat(iotPrefix, "--expanded-tablerow"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expanded-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values[deletedAttribute]))
   }, dragEnterLeaveHandlers), /*#__PURE__*/React__default.createElement(TableCell, {
     colSpan: totalColumns
   }, rowDetails))) : /*#__PURE__*/React__default.createElement(TableExpandRow, _extends({
     key: id,
     expandHeaderId: "".concat(tableId, "-expand"),
-    className: classnames("".concat(iotPrefix, "--expandable-tablerow"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expandable-tablerow--parent"), hasRowNesting && (hasRowNesting === null || hasRowNesting === void 0 ? void 0 : hasRowNesting.hasSingleNestedHierarchy) && nestingChildCount > 0), "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), "".concat(iotPrefix, "--expandable-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--expandable-tablerow--last-child"), isLastChild), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values._deleted)),
+    className: classnames("".concat(iotPrefix, "--expandable-tablerow"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--expandable-tablerow--parent"), hasRowNesting && (hasRowNesting === null || hasRowNesting === void 0 ? void 0 : hasRowNesting.hasSingleNestedHierarchy) && nestingChildCount > 0), "".concat(iotPrefix, "--expandable-tablerow--childless"), hasRowNesting && nestingChildCount === 0), "".concat(iotPrefix, "--expandable-tablerow--indented"), parseInt(nestingOffset, 10) > 0), "".concat(iotPrefix, "--expandable-tablerow--singly-selected"), hasRowSelection === 'single' && isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--expandable-tablerow--last-child"), isLastChild), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values[deletedAttribute])),
     "data-row-nesting": hasRowNesting,
     "data-child-count": nestingChildCount,
     "data-nesting-offset": nestingOffset,
@@ -437,7 +451,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     rowId: id,
     langDir: langDir
   }, dragEnterLeaveHandlers), tableCells) : hasRowSelection === 'single' && isSelected ? /*#__PURE__*/React__default.createElement(TableRow, _extends({
-    className: classnames("".concat(iotPrefix, "--table__row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--table__row--singly-selected"), isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--table__row--background"), isSelected), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values._deleted)),
+    className: classnames("".concat(iotPrefix, "--table__row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--table__row--singly-selected"), isSelected && !useRadioButtonSingleSelect), "".concat(iotPrefix, "--table__row--background"), isSelected), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values[deletedAttribute])),
     key: id,
     onClick: function onClick() {
       if (isSelectable !== false) {
@@ -448,7 +462,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
       }
     }
   }, dragEnterLeaveHandlers), tableCells) : /*#__PURE__*/React__default.createElement(TableRow, _extends({
-    className: classnames("".concat(iotPrefix, "--table__row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--table__row--unselectable"), isSelectable === false), "".concat(iotPrefix, "--table__row--selectable"), isSelectable !== false), "".concat(iotPrefix, "--table__row--editing"), isEditMode), "".concat(iotPrefix, "--table__row--selected"), isSelected), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values._deleted)),
+    className: classnames("".concat(iotPrefix, "--table__row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--table__row--unselectable"), isSelectable === false), "".concat(iotPrefix, "--table__row--selectable"), isSelectable !== false), "".concat(iotPrefix, "--table__row--editing"), isEditMode), "".concat(iotPrefix, "--table__row--selected"), isSelected), "".concat(iotPrefix, "--table__row--dragging"), isDragRow), "".concat(iotPrefix, "--table__row--softdeleted"), values === null || values === void 0 ? void 0 : values[deletedAttribute])),
     key: id,
     onClick: function onClick() {
       if (isSelectable !== false) {
@@ -544,6 +558,17 @@ TableBodyRow.__docgenInfo = {
       },
       "required": false
     },
+    "dragHandleTooltip": {
+      "defaultValue": {
+        "value": "'Click and drag to new location'",
+        "computed": false
+      },
+      "description": "I18N label for drag handle tooltip",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "rowActions": {
       "defaultValue": {
         "value": "null",
@@ -933,6 +958,28 @@ TableBodyRow.__docgenInfo = {
       },
       "required": false
     },
+    "isDragging": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "If a drag operation is currently in progress.",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "deletedAttribute": {
+      "defaultValue": {
+        "value": "'_deleted'",
+        "computed": false
+      },
+      "description": "Attribute name to identify deleted rows",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "ordering": {
       "description": "What column ordering is currently applied to the table",
       "type": {

package/es/components/Table/TableBody/TableBodyRow/TableDragHandle.js

@@ -1,5 +1,6 @@
 import React__default, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from '@carbon/react';
 import { settings } from '../../../../constants/Settings.js';
 import { Draggable } from '@carbon/icons-react';
 
@@ -13,7 +14,15 @@ var propTypes = {
   /**
    * The ID of the table row this handle is it. This is the row that will be dragged by this handle.
    */
-  rowId: PropTypes.string.isRequired
+  rowId: PropTypes.string.isRequired,
+  /**
+   * If a drag operation is currently in progress. When true, the tooltip is hidden.
+   */
+  isDragging: PropTypes.bool.isRequired,
+  /**
+   * Tooltip text to display on hover.
+   */
+  tooltipText: PropTypes.string.isRequired
 };
 
 /**
@@ -21,7 +30,9 @@ var propTypes = {
  */
 var TableDragHandle = /*#__PURE__*/forwardRef(function TableDragHandle(_ref, ref) {
   var onStartDrag = _ref.onStartDrag,
-    rowId = _ref.rowId;
+    rowId = _ref.rowId,
+    isDragging = _ref.isDragging,
+    tooltipText = _ref.tooltipText;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(iotPrefix, "--table-drag-handle"),
     ref: ref,
@@ -31,7 +42,18 @@ var TableDragHandle = /*#__PURE__*/forwardRef(function TableDragHandle(_ref, ref
       e.stopPropagation();
       onStartDrag(e, rowId);
     }
-  }, /*#__PURE__*/React__default.createElement(Draggable, null));
+  }, isDragging ?
+  /*#__PURE__*/
+  // During drag, render icon without tooltip
+  React__default.createElement("div", {
+    className: "".concat(iotPrefix, "--table-drag-handle-icon")
+  }, /*#__PURE__*/React__default.createElement(Draggable, null)) :
+  /*#__PURE__*/
+  // When not dragging, render with tooltip
+  React__default.createElement(Tooltip, {
+    label: tooltipText,
+    autoAlign: true
+  }, /*#__PURE__*/React__default.createElement(Draggable, null)));
 });
 TableDragHandle.propTypes = propTypes;
 TableDragHandle.__docgenInfo = {
@@ -52,6 +74,20 @@ TableDragHandle.__docgenInfo = {
         "name": "string"
       },
       "required": true
+    },
+    "isDragging": {
+      "description": "If a drag operation is currently in progress. When true, the tooltip is hidden.",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
+    },
+    "tooltipText": {
+      "description": "Tooltip text to display on hover.",
+      "type": {
+        "name": "string"
+      },
+      "required": true
     }
   }
 };