carbon-addons-iot-react 5.6.3 → 5.6.4

package/es/components/Table/Table.js

@@ -594,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',
@@ -1009,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,

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]),
@@ -154,6 +156,7 @@ var defaultProps = {
   inProgressText: 'In progress',
   dismissText: 'Dismiss',
   actionFailedText: 'Action failed',
+  dragHandleTooltip: 'Click and drag to new location',
   size: undefined,
   hasDragAndDrop: false,
   hasBreadcrumbDrop: false,
@@ -179,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,
@@ -320,6 +324,7 @@ var TableBody = function TableBody(_ref) {
       clickToExpandAria: clickToExpandAria,
       columns: columns,
       dismissText: dismissText,
+      dragHandleTooltip: dragHandleTooltip,
       expandedIds: expandedIds,
       expandedRows: expandedRows,
       hasRowActions: hasRowActions,
@@ -329,6 +334,7 @@ var TableBody = function TableBody(_ref) {
       useRadioButtonSingleSelect: useRadioButtonSingleSelect,
       indeterminateSelectionIds: getIndeterminateRowSelectionIds(rows, selectedIds),
       inProgressText: inProgressText,
+      isDragging: isDragging,
       langDir: langDir,
       learnMoreText: learnMoreText,
       loadingMoreIds: loadingMoreIds,
@@ -756,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",

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,6 +139,8 @@ 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,
   /** Attribute name to identify deleted rows */
@@ -150,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,
@@ -177,6 +182,7 @@ var defaultProps = {
   onDragLeaveRow: null,
   isDraggable: false,
   isDragRow: false,
+  isDragging: false,
   deletedAttribute: '_deleted'
 };
 var TableBodyRow = function TableBodyRow(_ref) {
@@ -210,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,
@@ -233,6 +240,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     onDragLeaveRow = _ref.onDragLeaveRow,
     isDragRow = _ref.isDragRow,
     isDraggable = _ref.isDraggable,
+    isDragging = _ref.isDragging,
     hasDragAndDrop = _ref.hasDragAndDrop,
     hideDragHandles = _ref.hideDragHandles,
     deletedAttribute = _ref.deletedAttribute;
@@ -289,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;
@@ -548,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",
@@ -937,6 +958,17 @@ 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'",

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
     }
   }
 };

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

@@ -54,6 +54,10 @@ var propTypes = {
   dismissText: PropTypes.string,
   /** I18N label for load more */
   loadMoreText: PropTypes.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes.string,
+  /** If a drag is currently in progress */
+  isDragging: PropTypes.bool,
   /** since some columns might not be currently visible */
   totalColumns: PropTypes.number,
   hasRowSelection: PropTypes.oneOf(['multi', 'single', false]),
@@ -137,6 +141,7 @@ var defaultProps = {
   clickToExpandAria: 'Click to expand.',
   columns: [],
   dismissText: 'Dismiss',
+  dragHandleTooltip: 'Click and drag to new location',
   expandedIds: [],
   expandedRows: [],
   hasRowActions: false,
@@ -146,6 +151,7 @@ var defaultProps = {
   useRadioButtonSingleSelect: false,
   indeterminateSelectionIds: [],
   inProgressText: 'In progress',
+  isDragging: false,
   langDir: 'ltr',
   learnMoreText: 'Learn more',
   loadingMoreIds: [],
@@ -184,6 +190,7 @@ function TableBodyRowRenderer(props) {
     clickToExpandAria = props.clickToExpandAria,
     columns = props.columns,
     dismissText = props.dismissText,
+    dragHandleTooltip = props.dragHandleTooltip,
     expandedIds = props.expandedIds,
     expandedRows = props.expandedRows,
     hasRowActions = props.hasRowActions,
@@ -193,6 +200,7 @@ function TableBodyRowRenderer(props) {
     useRadioButtonSingleSelect = props.useRadioButtonSingleSelect,
     indeterminateSelectionIds = props.indeterminateSelectionIds,
     inProgressText = props.inProgressText,
+    isDragging = props.isDragging,
     langDir = props.langDir,
     learnMoreText = props.learnMoreText,
     loadingMoreIds = props.loadingMoreIds,
@@ -262,6 +270,8 @@ function TableBodyRowRenderer(props) {
     onDragEnterRow: canDrop ? onDragEnterRow : null,
     onDragLeaveRow: canDrop ? onDragLeaveRow : null,
     isDragRow: dragRowIds.indexOf(row.id) !== -1,
+    isDragging: isDragging,
+    dragHandleTooltip: dragHandleTooltip,
     langDir: langDir,
     key: row.id,
     isExpanded: isRowExpanded,
@@ -422,6 +432,17 @@ TableBodyRowRenderer.__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
+    },
     "expandedIds": {
       "defaultValue": {
         "value": "[]",
@@ -550,6 +571,17 @@ TableBodyRowRenderer.__docgenInfo = {
       },
       "required": false
     },
+    "isDragging": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "If a drag is currently in progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "langDir": {
       "defaultValue": {
         "value": "'ltr'",

package/lib/components/Table/Table.js

@@ -611,6 +611,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',
@@ -1026,7 +1027,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,

package/lib/components/Table/TableBody/TableBody.js

@@ -67,6 +67,8 @@ var propTypes = {
   dismissText: PropTypes__default.default.string,
   /** I18N label for load more */
   loadMoreText: PropTypes__default.default.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes__default.default.string,
   /** since some columns might not be currently visible */
   totalColumns: PropTypes__default.default.number,
   hasRowSelection: PropTypes__default.default.oneOf(['multi', 'single', false]),
@@ -164,6 +166,7 @@ var defaultProps = {
   inProgressText: 'In progress',
   dismissText: 'Dismiss',
   actionFailedText: 'Action failed',
+  dragHandleTooltip: 'Click and drag to new location',
   size: undefined,
   hasDragAndDrop: false,
   hasBreadcrumbDrop: false,
@@ -189,6 +192,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,
@@ -330,6 +334,7 @@ var TableBody = function TableBody(_ref) {
       clickToExpandAria: clickToExpandAria,
       columns: columns,
       dismissText: dismissText,
+      dragHandleTooltip: dragHandleTooltip,
       expandedIds: expandedIds,
       expandedRows: expandedRows,
       hasRowActions: hasRowActions,
@@ -339,6 +344,7 @@ var TableBody = function TableBody(_ref) {
       useRadioButtonSingleSelect: useRadioButtonSingleSelect,
       indeterminateSelectionIds: getIndeterminateRowSelectionIds(rows, selectedIds),
       inProgressText: inProgressText,
+      isDragging: isDragging,
       langDir: langDir,
       learnMoreText: learnMoreText,
       loadingMoreIds: loadingMoreIds,
@@ -766,6 +772,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",

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

@@ -56,6 +56,8 @@ var propTypes = {
   clickToExpandAria: PropTypes__default.default.string,
   /** internationalized label  */
   clickToCollapseAria: PropTypes__default.default.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes__default.default.string,
   /** List of columns */
   columns: TablePropTypes.TableColumnsPropTypes.isRequired,
   /** table wide options */
@@ -147,6 +149,8 @@ var propTypes = {
   isDraggable: PropTypes__default.default.bool,
   /** If this row is being dragged. */
   isDragRow: PropTypes__default.default.bool,
+  /** If a drag operation is currently in progress. */
+  isDragging: PropTypes__default.default.bool,
   /** If all drag handles should be hidden. This happens when an undraggable row is in the selection. */
   hideDragHandles: PropTypes__default.default.bool,
   /** Attribute name to identify deleted rows */
@@ -160,6 +164,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,
@@ -187,6 +192,7 @@ var defaultProps = {
   onDragLeaveRow: null,
   isDraggable: false,
   isDragRow: false,
+  isDragging: false,
   deletedAttribute: '_deleted'
 };
 var TableBodyRow = function TableBodyRow(_ref) {
@@ -220,6 +226,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,
@@ -243,6 +250,7 @@ var TableBodyRow = function TableBodyRow(_ref) {
     onDragLeaveRow = _ref.onDragLeaveRow,
     isDragRow = _ref.isDragRow,
     isDraggable = _ref.isDraggable,
+    isDragging = _ref.isDragging,
     hasDragAndDrop = _ref.hasDragAndDrop,
     hideDragHandles = _ref.hideDragHandles,
     deletedAttribute = _ref.deletedAttribute;
@@ -299,7 +307,9 @@ var TableBodyRow = function TableBodyRow(_ref) {
     className: "".concat(iotPrefix, "--table-grab-handle-cell")
   }, !isDraggable || hideDragHandles ? null : /*#__PURE__*/React__default.default.createElement(TableDragHandle.TableDragHandle, {
     onStartDrag: onStartDrag,
-    rowId: id
+    rowId: id,
+    isDragging: isDragging,
+    tooltipText: dragHandleTooltip
   }));
   var firstVisibleColIndex = ordering.findIndex(function (col) {
     return !col.isHidden;
@@ -558,6 +568,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",
@@ -947,6 +968,17 @@ 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'",

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

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var react = require('@carbon/react');
 var Settings = require('../../../../constants/Settings.js');
 var iconsReact = require('@carbon/icons-react');
 
@@ -20,7 +21,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__default.default.string.isRequired
+  rowId: PropTypes__default.default.string.isRequired,
+  /**
+   * If a drag operation is currently in progress. When true, the tooltip is hidden.
+   */
+  isDragging: PropTypes__default.default.bool.isRequired,
+  /**
+   * Tooltip text to display on hover.
+   */
+  tooltipText: PropTypes__default.default.string.isRequired
 };
 
 /**
@@ -28,7 +37,9 @@ var propTypes = {
  */
 var TableDragHandle = /*#__PURE__*/React.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.default.createElement("div", {
     className: "".concat(iotPrefix, "--table-drag-handle"),
     ref: ref,
@@ -38,7 +49,18 @@ var TableDragHandle = /*#__PURE__*/React.forwardRef(function TableDragHandle(_re
       e.stopPropagation();
       onStartDrag(e, rowId);
     }
-  }, /*#__PURE__*/React__default.default.createElement(iconsReact.Draggable, null));
+  }, isDragging ?
+  /*#__PURE__*/
+  // During drag, render icon without tooltip
+  React__default.default.createElement("div", {
+    className: "".concat(iotPrefix, "--table-drag-handle-icon")
+  }, /*#__PURE__*/React__default.default.createElement(iconsReact.Draggable, null)) :
+  /*#__PURE__*/
+  // When not dragging, render with tooltip
+  React__default.default.createElement(react.Tooltip, {
+    label: tooltipText,
+    autoAlign: true
+  }, /*#__PURE__*/React__default.default.createElement(iconsReact.Draggable, null)));
 });
 TableDragHandle.propTypes = propTypes;
 TableDragHandle.__docgenInfo = {
@@ -59,6 +81,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
     }
   }
 };

package/lib/components/Table/TableBody/TableBodyRowRenderer.js

@@ -64,6 +64,10 @@ var propTypes = {
   dismissText: PropTypes__default.default.string,
   /** I18N label for load more */
   loadMoreText: PropTypes__default.default.string,
+  /** I18N label for drag handle tooltip */
+  dragHandleTooltip: PropTypes__default.default.string,
+  /** If a drag is currently in progress */
+  isDragging: PropTypes__default.default.bool,
   /** since some columns might not be currently visible */
   totalColumns: PropTypes__default.default.number,
   hasRowSelection: PropTypes__default.default.oneOf(['multi', 'single', false]),
@@ -147,6 +151,7 @@ var defaultProps = {
   clickToExpandAria: 'Click to expand.',
   columns: [],
   dismissText: 'Dismiss',
+  dragHandleTooltip: 'Click and drag to new location',
   expandedIds: [],
   expandedRows: [],
   hasRowActions: false,
@@ -156,6 +161,7 @@ var defaultProps = {
   useRadioButtonSingleSelect: false,
   indeterminateSelectionIds: [],
   inProgressText: 'In progress',
+  isDragging: false,
   langDir: 'ltr',
   learnMoreText: 'Learn more',
   loadingMoreIds: [],
@@ -194,6 +200,7 @@ function TableBodyRowRenderer(props) {
     clickToExpandAria = props.clickToExpandAria,
     columns = props.columns,
     dismissText = props.dismissText,
+    dragHandleTooltip = props.dragHandleTooltip,
     expandedIds = props.expandedIds,
     expandedRows = props.expandedRows,
     hasRowActions = props.hasRowActions,
@@ -203,6 +210,7 @@ function TableBodyRowRenderer(props) {
     useRadioButtonSingleSelect = props.useRadioButtonSingleSelect,
     indeterminateSelectionIds = props.indeterminateSelectionIds,
     inProgressText = props.inProgressText,
+    isDragging = props.isDragging,
     langDir = props.langDir,
     learnMoreText = props.learnMoreText,
     loadingMoreIds = props.loadingMoreIds,
@@ -272,6 +280,8 @@ function TableBodyRowRenderer(props) {
     onDragEnterRow: canDrop ? onDragEnterRow : null,
     onDragLeaveRow: canDrop ? onDragLeaveRow : null,
     isDragRow: dragRowIds.indexOf(row.id) !== -1,
+    isDragging: isDragging,
+    dragHandleTooltip: dragHandleTooltip,
     langDir: langDir,
     key: row.id,
     isExpanded: isRowExpanded,
@@ -432,6 +442,17 @@ TableBodyRowRenderer.__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
+    },
     "expandedIds": {
       "defaultValue": {
         "value": "[]",
@@ -560,6 +581,17 @@ TableBodyRowRenderer.__docgenInfo = {
       },
       "required": false
     },
+    "isDragging": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "If a drag is currently in progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "langDir": {
       "defaultValue": {
         "value": "'ltr'",

package/package.json

@@ -353,7 +353,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.6.3",
+  "version": "5.6.4",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",

package/umd/carbon-addons-iot-react.js

@@ -219011,7 +219011,15 @@ ${formatRule(Codicon.menuSubmenu)}
     /**
      * 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
   };
 
   /**
@@ -219019,7 +219027,9 @@ ${formatRule(Codicon.menuSubmenu)}
    */
   var TableDragHandle = /*#__PURE__*/React$1.forwardRef(function TableDragHandle(_ref, ref) {
     var onStartDrag = _ref.onStartDrag,
-      rowId = _ref.rowId;
+      rowId = _ref.rowId,
+      isDragging = _ref.isDragging,
+      tooltipText = _ref.tooltipText;
     return /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(iotPrefix$1$, "--table-drag-handle"),
       ref: ref,
@@ -219029,7 +219039,18 @@ ${formatRule(Codicon.menuSubmenu)}
         e.stopPropagation();
         onStartDrag(e, rowId);
       }
-    }, /*#__PURE__*/React$1.createElement(iconsReact.Draggable, null));
+    }, isDragging ?
+    /*#__PURE__*/
+    // During drag, render icon without tooltip
+    React$1.createElement("div", {
+      className: "".concat(iotPrefix$1$, "--table-drag-handle-icon")
+    }, /*#__PURE__*/React$1.createElement(iconsReact.Draggable, null)) :
+    /*#__PURE__*/
+    // When not dragging, render with tooltip
+    React$1.createElement(react.Tooltip, {
+      label: tooltipText,
+      autoAlign: true
+    }, /*#__PURE__*/React$1.createElement(iconsReact.Draggable, null)));
   });
   TableDragHandle.propTypes = propTypes$25;
   TableDragHandle.__docgenInfo = {
@@ -219050,6 +219071,20 @@ ${formatRule(Codicon.menuSubmenu)}
           "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
       }
     }
   };
@@ -219079,6 +219114,8 @@ ${formatRule(Codicon.menuSubmenu)}
     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 */
@@ -219170,6 +219207,8 @@ ${formatRule(Codicon.menuSubmenu)}
     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,
     /** Attribute name to identify deleted rows */
@@ -219183,6 +219222,7 @@ ${formatRule(Codicon.menuSubmenu)}
     overflowMenuAria: 'More actions',
     clickToExpandAria: 'Click to expand.',
     clickToCollapseAria: 'Click to collapse.',
+    dragHandleTooltip: 'Click and drag to new location',
     rowActions: null,
     rowDetails: null,
     nestingLevel: 0,
@@ -219210,6 +219250,7 @@ ${formatRule(Codicon.menuSubmenu)}
     onDragLeaveRow: null,
     isDraggable: false,
     isDragRow: false,
+    isDragging: false,
     deletedAttribute: '_deleted'
   };
   var TableBodyRow = function TableBodyRow(_ref) {
@@ -219243,6 +219284,7 @@ ${formatRule(Codicon.menuSubmenu)}
       overflowMenuAria = _ref.overflowMenuAria,
       clickToExpandAria = _ref.clickToExpandAria,
       clickToCollapseAria = _ref.clickToCollapseAria,
+      dragHandleTooltip = _ref.dragHandleTooltip,
       inProgressText = _ref.inProgressText,
       actionFailedText = _ref.actionFailedText,
       learnMoreText = _ref.learnMoreText,
@@ -219266,6 +219308,7 @@ ${formatRule(Codicon.menuSubmenu)}
       onDragLeaveRow = _ref.onDragLeaveRow,
       isDragRow = _ref.isDragRow,
       isDraggable = _ref.isDraggable,
+      isDragging = _ref.isDragging,
       hasDragAndDrop = _ref.hasDragAndDrop,
       hideDragHandles = _ref.hideDragHandles,
       deletedAttribute = _ref.deletedAttribute;
@@ -219322,7 +219365,9 @@ ${formatRule(Codicon.menuSubmenu)}
       className: "".concat(iotPrefix$1_, "--table-grab-handle-cell")
     }, !isDraggable || hideDragHandles ? null : /*#__PURE__*/React$1.createElement(TableDragHandle, {
       onStartDrag: onStartDrag,
-      rowId: id
+      rowId: id,
+      isDragging: isDragging,
+      tooltipText: dragHandleTooltip
     }));
     var firstVisibleColIndex = ordering.findIndex(function (col) {
       return !col.isHidden;
@@ -219581,6 +219626,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "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",
@@ -219970,6 +220026,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "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'",
@@ -220570,6 +220637,10 @@ ${formatRule(Codicon.menuSubmenu)}
     dismissText: PropTypes.string,
     /** I18N label for load more */
     loadMoreText: PropTypes.string,
+    /** I18N label for drag handle tooltip */
+    dragHandleTooltip: PropTypes.string,
+    /** If a drag is currently in progress */
+    isDragging: PropTypes.bool,
     /** since some columns might not be currently visible */
     totalColumns: PropTypes.number,
     hasRowSelection: PropTypes.oneOf(['multi', 'single', false]),
@@ -220653,6 +220724,7 @@ ${formatRule(Codicon.menuSubmenu)}
     clickToExpandAria: 'Click to expand.',
     columns: [],
     dismissText: 'Dismiss',
+    dragHandleTooltip: 'Click and drag to new location',
     expandedIds: [],
     expandedRows: [],
     hasRowActions: false,
@@ -220662,6 +220734,7 @@ ${formatRule(Codicon.menuSubmenu)}
     useRadioButtonSingleSelect: false,
     indeterminateSelectionIds: [],
     inProgressText: 'In progress',
+    isDragging: false,
     langDir: 'ltr',
     learnMoreText: 'Learn more',
     loadingMoreIds: [],
@@ -220700,6 +220773,7 @@ ${formatRule(Codicon.menuSubmenu)}
       clickToExpandAria = props.clickToExpandAria,
       columns = props.columns,
       dismissText = props.dismissText,
+      dragHandleTooltip = props.dragHandleTooltip,
       expandedIds = props.expandedIds,
       expandedRows = props.expandedRows,
       hasRowActions = props.hasRowActions,
@@ -220709,6 +220783,7 @@ ${formatRule(Codicon.menuSubmenu)}
       useRadioButtonSingleSelect = props.useRadioButtonSingleSelect,
       indeterminateSelectionIds = props.indeterminateSelectionIds,
       inProgressText = props.inProgressText,
+      isDragging = props.isDragging,
       langDir = props.langDir,
       learnMoreText = props.learnMoreText,
       loadingMoreIds = props.loadingMoreIds,
@@ -220778,6 +220853,8 @@ ${formatRule(Codicon.menuSubmenu)}
       onDragEnterRow: canDrop ? onDragEnterRow : null,
       onDragLeaveRow: canDrop ? onDragLeaveRow : null,
       isDragRow: dragRowIds.indexOf(row.id) !== -1,
+      isDragging: isDragging,
+      dragHandleTooltip: dragHandleTooltip,
       langDir: langDir,
       key: row.id,
       isExpanded: isRowExpanded,
@@ -220938,6 +221015,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "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
+      },
       "expandedIds": {
         "defaultValue": {
           "value": "[]",
@@ -221066,6 +221154,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "isDragging": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "If a drag is currently in progress",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "langDir": {
         "defaultValue": {
           "value": "'ltr'",
@@ -222192,6 +222291,8 @@ ${formatRule(Codicon.menuSubmenu)}
     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]),
@@ -222289,6 +222390,7 @@ ${formatRule(Codicon.menuSubmenu)}
     inProgressText: 'In progress',
     dismissText: 'Dismiss',
     actionFailedText: 'Action failed',
+    dragHandleTooltip: 'Click and drag to new location',
     size: undefined,
     hasDragAndDrop: false,
     hasBreadcrumbDrop: false,
@@ -222314,6 +222416,7 @@ ${formatRule(Codicon.menuSubmenu)}
       dismissText = _ref.dismissText,
       actionFailedText = _ref.actionFailedText,
       loadMoreText = _ref.loadMoreText,
+      dragHandleTooltip = _ref.dragHandleTooltip,
       totalColumns = _ref.totalColumns,
       actions = _ref.actions,
       rowActionsState = _ref.rowActionsState,
@@ -222455,6 +222558,7 @@ ${formatRule(Codicon.menuSubmenu)}
         clickToExpandAria: clickToExpandAria,
         columns: columns,
         dismissText: dismissText,
+        dragHandleTooltip: dragHandleTooltip,
         expandedIds: expandedIds,
         expandedRows: expandedRows,
         hasRowActions: hasRowActions,
@@ -222464,6 +222568,7 @@ ${formatRule(Codicon.menuSubmenu)}
         useRadioButtonSingleSelect: useRadioButtonSingleSelect,
         indeterminateSelectionIds: getIndeterminateRowSelectionIds(rows, selectedIds),
         inProgressText: inProgressText,
+        isDragging: isDragging,
         langDir: langDir,
         learnMoreText: learnMoreText,
         loadingMoreIds: loadingMoreIds,
@@ -222891,6 +222996,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "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",
@@ -225243,6 +225359,7 @@ ${formatRule(Codicon.menuSubmenu)}
         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',
@@ -225658,7 +225775,7 @@ ${formatRule(Codicon.menuSubmenu)}
       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,