@carbon/ibm-products 2.10.2 → 2.11.1

package/es/components/CreateModal/CreateModal.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "open", "title", "subtitle", "description", "secondaryButtonText", "primaryButtonText", "disableSubmit", "selectorPrimaryFocus"];
+var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "open", "title", "subtitle", "description", "secondaryButtonText", "portalTarget", "primaryButtonText", "disableSubmit", "selectorPrimaryFocus"];
 /**
  * Copyright IBM Corp. 2021, 2021
  *
@@ -17,6 +17,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 var componentName = 'CreateModal';
 var blockClass = "".concat(pkg.prefix, "--create-modal");
 
@@ -47,11 +48,13 @@ export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     subtitle = _ref2.subtitle,
     description = _ref2.description,
     secondaryButtonText = _ref2.secondaryButtonText,
+    portalTargetIn = _ref2.portalTarget,
     primaryButtonText = _ref2.primaryButtonText,
     disableSubmit = _ref2.disableSubmit,
     selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+  var renderPortalUse = usePortalTarget(portalTargetIn);
+  return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     selectorPrimaryFocus: selectorPrimaryFocus,
     className: cx(blockClass, className),
     open: open,
@@ -84,7 +87,7 @@ export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     kind: "primary",
     onClick: onRequestSubmit,
     disabled: disableSubmit
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -121,6 +124,10 @@ CreateModal.propTypes = {
    * Specifies whether the CreateModal is open or not.
    */
   open: PropTypes.bool,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
   /**
    * Specifies the primary button's text in the modal.
    */

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
- * 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.
@@ -59,8 +59,10 @@ export 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 = useRef();
   var multiKeyTrackingRef = useRef();
   useClickOutside(gridAreaRef, function (target) {
@@ -82,7 +84,7 @@ export var DatagridContent = function DatagridContent(_ref) {
     var _getTableProps;
     return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
       className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".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 handleGridKeyPress({
@@ -98,8 +100,8 @@ export var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus(inlineEditState, dispatch);
       } : null,
       title: title
-    }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
-      rows: rows
+    }), !withVirtualScroll && /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
+      rows: contentRows
     })));
   };
   var _useMultipleKeyTracki = useMultipleKeyTracking({
@@ -151,7 +153,7 @@ export var DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { pkg } from '../../../settings';
 import { TableBody, TableRow, TableCell } from '@carbon/react';
-import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState } from '../../EmptyStates';
+import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState, EmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
@@ -30,6 +30,7 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     action: emptyStateAction,
     link: emptyStateLink
   };
+  var validEmptyStates = ['error', 'noData', 'notFound'];
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
     role: false
   }), {
@@ -37,6 +38,6 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: headers.length,
     className: "".concat(blockClass, "__empty-state-cell")
-  }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState, emptyStateProps))));
+  }, validEmptyStates.includes(emptyStateType) ? /*#__PURE__*/React.createElement(React.Fragment, null, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState, emptyStateProps)) : /*#__PURE__*/React.createElement(EmptyState, emptyStateProps))));
 };
 export default DatagridEmptyBody;

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -1,9 +1,8 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';
@@ -11,17 +10,31 @@ import { pkg } from '../../../settings';
 var blockClass = "".concat(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.createElement("div", {
-      className: "".concat(blockClass, "__expanded-row")
-    }, PreviousRowRenderer(datagridState), /*#__PURE__*/React.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.createElement("tr", {
+      className: "".concat(blockClass, "__expanded-row"),
+      onMouseEnter: function onMouseEnter(event) {
+        return toggleParentHoverClass(event, 'enter');
+      },
+      onMouseLeave: function onMouseLeave(event) {
+        return toggleParentHoverClass(event);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
       style: {
         height: expandedContentHeight ? expandedContentHeight : null

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -2,14 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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.
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Copyright IBM Corp. 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.
  */
-// @flow
+
 import React from 'react';
 import { TableRow, TableCell, SkeletonText } from '@carbon/react';
 import { px } from '@carbon/layout';
@@ -30,7 +31,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;
@@ -45,6 +47,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 = px(subRowCount * rowHeights[rowSize]);
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
@@ -61,48 +66,50 @@ var DatagridRow = function DatagridRow(datagridState) {
       el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     });
   };
-  return /*#__PURE__*/React.createElement(TableRow, _extends({
-    className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(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 = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, _extends({
+    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 = _objectWithoutProperties(cellProps, _excluded);
     var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));
-    if (cell && cell.column && cell.column.id === selectionColumnId) {
+    if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
@@ -113,6 +120,6 @@ var DatagridRow = function DatagridRow(datagridState) {
     }, restProps, {
       key: cell.column.id
     }), content);
-  }));
+  })), renderExpandedRow());
 };
 export default DatagridRow;

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * 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.
@@ -73,39 +73,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.createElement(MenuButton, {
-      label: "More",
-      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon))
-    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2) {
-        if (displayAllInMenu) {
-          return /*#__PURE__*/React.createElement(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.createElement(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.createElement(MenuButton, {
+      label: "More",
+      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".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
@@ -113,14 +115,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   return /*#__PURE__*/React.createElement(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) {
@@ -128,10 +124,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/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -1,5 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
 /*
  * Licensed Materials - Property of IBM
@@ -8,163 +8,67 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable, Locked } from '@carbon/react/icons';
-// import { useDrag, useDrop } from 'react-dnd';
+import { Draggable as DraggableIcon, Locked } from '@carbon/react/icons';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-var useEffect = React.useEffect,
-  useRef = React.useRef,
-  useState = React.useState;
+import { CSS } from '@dnd-kit/utilities';
+import { useSortable } from '@dnd-kit/sortable';
 var blockClass = "".concat(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 = _slicedToArray(_useState, 1),
-    isDragging = _useState2[0];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_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 = _slicedToArray(_useState5, 2),
-    isGrabbed = _useState6[0],
-    setIsGrabbed = _useState6[1];
-  var _useState7 = useState(isFocused),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isFocusedOnItem = _useState8[0],
-    setIsFocusedOnItem = _useState8[1];
-  // drop(ref);
+    selected = _ref.selected;
+  var _useSortable = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
   }, isSticky ? /*#__PURE__*/React.createElement(Locked, {
     size: 16
-  }) : /*#__PURE__*/React.createElement(Draggable, {
+  }) : /*#__PURE__*/React.createElement(DraggableIcon, {
     size: 16
   })), children);
-  return /*#__PURE__*/React.createElement("li", {
-    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_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: CSS.Transform.toString(transform),
+    transition: transition
+  };
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_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.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.createElement("div", {
     className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
-  }, (!isOver || disabled) && content));
+  }, content));
 };
 DraggableElement.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,
+  classList: PropTypes.string,
   disabled: PropTypes.bool,
-  droppedLabel: PropTypes.string,
-  grabbedLabel: PropTypes.string,
   id: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-  isFocused: PropTypes.bool.isRequired,
   isSticky: PropTypes.bool,
-  listData: PropTypes.array.isRequired,
-  // moveElement: PropTypes.func.isRequired,
-  onArrowKeyDown: PropTypes.func.isRequired,
-  onGrab: PropTypes.func.isRequired,
-  positionLabel: PropTypes.string,
-  selected: PropTypes.bool,
-  type: PropTypes.string.isRequired
+  selected: PropTypes.bool
 };
 export default DraggableElement;