@carbon/ibm-products 2.10.2 → 2.11.1

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -28,7 +28,7 @@ var _hooks2 = require("../../DataSpreadsheet/hooks");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -69,8 +69,10 @@ var DatagridContent = function DatagridContent(_ref) {
     DatagridActions = datagridState.DatagridActions,
     totalColumnsWidth = datagridState.totalColumnsWidth,
     gridRef = datagridState.gridRef,
-    state = datagridState.state;
-  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+    state = datagridState.state,
+    page = datagridState.page,
+    rows = datagridState.rows;
+  var contentRows = DatagridPagination && page || rows;
   var gridAreaRef = (0, _react.useRef)();
   var multiKeyTrackingRef = (0, _react.useRef)();
   (0, _hooks.useClickOutside)(gridAreaRef, function (target) {
@@ -92,7 +94,7 @@ var DatagridContent = function DatagridContent(_ref) {
     var _getTableProps;
     return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
-      role: withInlineEdit && 'grid',
+      role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: withInlineEdit ? function (event) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
@@ -108,8 +110,8 @@ var DatagridContent = function DatagridContent(_ref) {
         return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
       } : null,
       title: title
-    }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
-      rows: rows
+    }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+      rows: contentRows
     })));
   };
   var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
@@ -161,7 +163,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -37,6 +37,7 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     action: emptyStateAction,
     link: emptyStateLink
   };
+  var validEmptyStates = ['error', 'noData', 'notFound'];
   return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
     role: false
   }), {
@@ -44,7 +45,7 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
     colSpan: headers.length,
     className: "".concat(blockClass, "__empty-state-cell")
-  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
+  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/_react.default.createElement(_EmptyStates.EmptyState, emptyStateProps))));
 };
 var _default = DatagridEmptyBody;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -7,28 +7,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _settings = require("../../../settings");
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 // eslint-disable-next-line react/prop-types
-var DatagridExpandedRow = function DatagridExpandedRow(PreviousRowRenderer, ExpandedRowContentComponent) {
+var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
     var row = datagridState.row;
     var _ref = row || {},
       expandedContentHeight = _ref.expandedContentHeight;
-    if (!row.isExpanded) {
-      return PreviousRowRenderer(datagridState);
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__expanded-row")
-    }, PreviousRowRenderer(datagridState), /*#__PURE__*/_react.default.createElement("div", {
+    var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
+      var _event$target;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
+        var parentNode = event.target.parentNode.previousElementSibling;
+        if (eventType === 'enter') {
+          parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
+        } else {
+          parentNode.classList.remove("".concat(blockClass, "__expandable-row--hover"));
+        }
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      className: "".concat(blockClass, "__expanded-row"),
+      onMouseEnter: function onMouseEnter(event) {
+        return toggleParentHoverClass(event, 'enter');
+      },
+      onMouseLeave: function onMouseLeave(event) {
+        return toggleParentHoverClass(event);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
       style: {
         height: expandedContentHeight ? expandedContentHeight : null

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -15,14 +15,13 @@ var _commonColumnIds = require("../common-column-ids");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _excluded = ["children"];
-/*
- * 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.
- */
-// @flow
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * Copyright IBM Corp. 2020, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var rowHeights = {
   xs: 24,
@@ -37,7 +36,8 @@ var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
-    withNestedRows = datagridState.withNestedRows;
+    withNestedRows = datagridState.withNestedRows,
+    prepareRow = datagridState.prepareRow;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -52,6 +52,9 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
   var hoverHandler = function hoverHandler(event) {
     var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+    if (!withNestedRows) {
+      return;
+    }
     var subRowCount = getVisibleNestedRowCount(row);
     var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
@@ -68,48 +71,50 @@ var DatagridRow = function DatagridRow(datagridState) {
       el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
+  var renderExpandedRow = function renderExpandedRow() {
+    if (row.isExpanded) {
+      var _row$RowExpansionRend;
+      prepareRow(row);
+      return row === null || row === void 0 || (_row$RowExpansionRend = row.RowExpansionRenderer) === null || _row$RowExpansionRend === void 0 ? void 0 : _row$RowExpansionRend.call(row, _objectSpread(_objectSpread({}, datagridState), {}, {
+        row: row
+      }));
+    }
+    return null;
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+    hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+  };
+  var handleOnKeyUp = function handleOnKeyUp(event) {
+    if (!withNestedRows) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === 'Space') {
+      focusRemover();
+      hoverHandler(event);
+    }
+  };
+  var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
+    className: rowClassNames
   }, row.getRowProps({
     role: false
   }), {
     key: row.id,
-    onMouseEnter: function onMouseEnter(event) {
-      if (!withNestedRows) {
-        return;
-      }
-      hoverHandler(event);
-    },
-    onMouseLeave: function onMouseLeave(event) {
-      var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
-      hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
-    },
-    onFocus: function onFocus(event) {
-      if (!withNestedRows) {
-        return;
-      }
-      hoverHandler(event);
-    },
-    onBlur: function onBlur() {
-      focusRemover();
-    },
-    onKeyUp: function onKeyUp(event) {
-      if (!withNestedRows) {
-        return;
-      }
-      if (event.key === 'Enter' || event.key === 'Space') {
-        focusRemover();
-        hoverHandler(event);
-      }
-    }
+    onMouseEnter: hoverHandler,
+    onMouseLeave: handleMouseLeave,
+    onFocus: hoverHandler,
+    onBlur: focusRemover,
+    onKeyUp: handleOnKeyUp
   }), row.cells.map(function (cell, index) {
+    var _cell$column;
     var cellProps = cell.getCellProps({
       role: false
     });
     var children = cellProps.children,
       restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
     var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));
-    if (cell && cell.column && cell.column.id === _commonColumnIds.selectionColumnId) {
+    if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === _commonColumnIds.selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
@@ -120,7 +125,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     }, restProps, {
       key: cell.column.id
     }), content);
-  }));
+  })), renderExpandedRow());
 };
 var _default = DatagridRow;
 exports.default = _default;

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

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -83,39 +83,41 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
     if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
-      return null;
+      return;
     }
-    return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
-      label: "More",
-      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
-    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2) {
-        if (displayAllInMenu) {
-          return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
-            key: "".concat(batchAction.label, "-").concat(index),
-            label: batchAction.label,
-            onClick: function onClick(event) {
-              batchAction.onClick(getSelectedRowData(), event);
-              if (batchAction.type === 'select_all') {
-                toggleAllRowsSelected(true);
-              }
-            }
-          });
-        }
-        return null;
-      }
+    var renderItem = function renderItem(batchAction, index) {
       return /*#__PURE__*/_react.default.createElement(_react2.MenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),
         label: batchAction.label,
         onClick: function onClick(event) {
-          batchAction.onClick(getSelectedRowData(), event);
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
-          }
+          return onClickHandler(event, batchAction);
         }
       });
+    };
+    return /*#__PURE__*/_react.default.createElement(_react2.MenuButton, {
+      label: "More",
+      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2 && !displayAllInMenu) {
+        return;
+      }
+      return renderItem(batchAction, index);
     }));
   };
+  var onClickHandler = function onClickHandler(event, batchAction) {
+    batchAction.onClick(getSelectedRowData(), event);
+    if (batchAction.type === 'select_all') {
+      toggleAllRowsSelected(true);
+    }
+  };
+  var onCancelHandler = function onCancelHandler() {
+    toggleAllRowsSelected(false);
+    setGlobalFilter(null);
+  };
+  var onSelectAllHandler = function onSelectAllHandler() {
+    toggleAllRowsSelected(true);
+    onSelectAllRows === null || onSelectAllRows === void 0 || onSelectAllRows(true);
+  };
 
   // Only display the first two batch actions, the rest are
   // displayed inside of the ButtonMenu if there are more than
@@ -123,14 +125,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   return /*#__PURE__*/_react.default.createElement(_react2.TableBatchActions, {
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
-    onCancel: function onCancel() {
-      toggleAllRowsSelected(false);
-      setGlobalFilter(null);
-    },
-    onSelectAll: function onSelectAll() {
-      toggleAllRowsSelected(true);
-      onSelectAllRows === null || onSelectAllRows === void 0 || onSelectAllRows(true);
-    },
+    onCancel: onCancelHandler,
+    onSelectAll: onSelectAllHandler,
     totalCount: rows && rows.length
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
@@ -138,10 +134,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
         onClick: function onClick(event) {
-          batchAction.onClick(getSelectedRowData(), event);
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
-          }
+          return onClickHandler(batchAction, event);
         },
         iconDescription: batchAction.label
       }, batchAction.label);

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -1,20 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@carbon/react/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _utilities = require("@dnd-kit/utilities");
+var _sortable = require("@dnd-kit/sortable");
 // @flow
 /*
  * Licensed Materials - Property of IBM
@@ -24,160 +23,61 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
-// import { useDrag, useDrop } from 'react-dnd';
-
-var useEffect = React.useEffect,
-  useRef = React.useRef,
-  useState = React.useState;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-// const DRAG_TYPE = `${blockClass}__shared-ui-draggable-element`;
-
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
-  var index = _ref.index,
-    listData = _ref.listData,
+  var id = _ref.id,
     children = _ref.children,
+    classList = _ref.classList,
     disabled = _ref.disabled,
     ariaLabel = _ref.ariaLabel,
-    onGrab = _ref.onGrab,
-    onArrowKeyDown = _ref.onArrowKeyDown,
-    isFocused = _ref.isFocused,
     isSticky = _ref.isSticky,
-    selected = _ref.selected,
-    _ref$positionLabel = _ref.positionLabel,
-    positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
-    _ref$grabbedLabel = _ref.grabbedLabel,
-    grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
-    _ref$droppedLabel = _ref.droppedLabel,
-    droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
-  var ref = useRef();
-
-  // const [{ isOver }, drop] = useDrop({
-  //   accept: DRAG_TYPE + type,
-  //   collect: (monitor) => ({
-  //     isOver: !!monitor.isOver(),
-  //   }),
-  //   drop: (item) => {
-  //     moveElement(item.index, index);
-  //   },
-  //   canDrop: () => !disabled,
-  //   hover(item) {
-  //     const dragIndex = item.index;
-  //     const hoverIndex = index;
-  //     // Don't replace items with themselves
-  //     if (dragIndex === hoverIndex || disabled) {
-  //       return;
-  //     }
-  //     // moveElement(dragIndex, hoverIndex);
-  //     // Time to actually perform the action
-  //     // Note: we're mutating the monitor item here!
-  //     // Generally it's better to avoid mutations,
-  //     // but it's good here for the sake of performance
-  //     // to avoid expensive index searches.
-  //     // eslint-disable-next-line no-param-reassign
-  //     item.index = hoverIndex;
-  //   },
-  // });
-
-  // const [{ isDragging }, drag, preview] = useDrag({
-  //   type: DRAG_TYPE + type,
-  //   item: { id, index },
-  //   canDrag: () => !disabled,
-  //   collect: (monitor) => ({
-  //     isDragging: monitor.isDragging(),
-  //   }),
-  // });
-
-  // Temporarily disable drag support because of commonjs support/issues with react-dnd in latest version
-  var _useState = useState(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    isDragging = _useState2[0];
-  var _useState3 = useState(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-    isOver = _useState4[0];
-  var preview = useRef();
-  var drag = useRef();
-  useEffect(function () {
-    if (isFocused && ref && ref.current) {
-      ref.current.focus();
-    }
-  }, [isFocused]);
-  var _useState5 = useState(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isGrabbed = _useState6[0],
-    setIsGrabbed = _useState6[1];
-  var _useState7 = useState(isFocused),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isFocusedOnItem = _useState8[0],
-    setIsFocusedOnItem = _useState8[1];
-  // drop(ref);
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    selected = _ref.selected;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, isSticky ? /*#__PURE__*/React.createElement(_icons.Locked, {
+  }, isSticky ? /*#__PURE__*/_react.default.createElement(_icons.Locked, {
     size: 16
-  }) : /*#__PURE__*/React.createElement(_icons.Draggable, {
+  }) : /*#__PURE__*/_react.default.createElement(_icons.Draggable, {
     size: 16
   })), children);
-  return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
-    ref: ref,
-    "aria-selected": isFocused,
-    role: "option",
-    tabIndex: isFocused ? 0 : -1,
-    onKeyPress: function onKeyPress(e) {
-      if (e.key === ' ' && e.target === e.currentTarget && !disabled) {
-        var positionText = positionLabel.replace('{index}', index + 1).replace('{total}', listData.length);
-        var grabAriaText = (isGrabbed ? droppedLabel : grabbedLabel).replace('{itemName}', ariaLabel);
-        onGrab(grabAriaText + positionText);
-        setIsGrabbed(!isGrabbed);
-        e.preventDefault();
-      }
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        onArrowKeyDown(e, isGrabbed, index);
-      }
-    },
-    onBlur: function onBlur(e) {
-      // handle when focus move to inner elements
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    },
-    onFocus: function onFocus(e) {
-      // handle when focus move to li element
-      setIsFocusedOnItem(e.currentTarget === e.target);
-    }
-  }, /*#__PURE__*/React.createElement("span", {
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  };
+  return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+    className: (0, _classnames.default)(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging), _cx)),
+    id: id,
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners, {
+    disabled: disabled,
+    "aria-selected": selected,
+    role: "option"
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
-    ref: preview,
-    className: "".concat(blockClass, "__draggable-handleHolder-droppable ").concat(blockClass, "__draggable-handleHolder-droppable--origin")
-  }, content) : /*#__PURE__*/React.createElement("div", {
-    ref: drag,
-    "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
-    ,
+  }, ariaLabel), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
-  }, (!isOver || disabled) && content));
+  }, content));
 };
 DraggableElement.propTypes = {
   ariaLabel: _propTypes.default.string.isRequired,
   children: _propTypes.default.element.isRequired,
+  classList: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  droppedLabel: _propTypes.default.string,
-  grabbedLabel: _propTypes.default.string,
   id: _propTypes.default.string.isRequired,
-  index: _propTypes.default.number.isRequired,
-  isFocused: _propTypes.default.bool.isRequired,
   isSticky: _propTypes.default.bool,
-  listData: _propTypes.default.array.isRequired,
-  // moveElement: PropTypes.func.isRequired,
-  onArrowKeyDown: _propTypes.default.func.isRequired,
-  onGrab: _propTypes.default.func.isRequired,
-  positionLabel: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  type: _propTypes.default.string.isRequired
+  selected: _propTypes.default.bool
 };
 var _default = DraggableElement;
 exports.default = _default;