@carbon/ibm-products 1.59.0 → 1.60.0

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.
@@ -24,7 +24,9 @@ import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
 import FilterPanel from './addons/Filtering/FilterPanel';
 import { FilterSummary } from '../../FilterSummary';
 import { FilterContext } from './addons/Filtering';
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
+import { CLEAR_FILTERS, CLEAR_SINGLE_FILTER } from './addons/Filtering/constants';
+import { useSubscribeToEventEmitter } from './addons/Filtering/hooks';
+import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var TableContainer = DataTable.TableContainer,
   Table = DataTable.Table;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -62,8 +64,11 @@ 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;
+    setAllFilters = datagridState.setAllFilters,
+    state = datagridState.state,
+    page = datagridState.page,
+    rows = datagridState.rows;
+  var contentRows = DatagridPagination && page || rows;
   var gridAreaRef = useRef();
   var multiKeyTrackingRef = useRef();
   useClickOutside(gridAreaRef, function (target) {
@@ -101,8 +106,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({
@@ -125,6 +130,9 @@ export var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), px((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
+    return clearSingleFilter(id, setAllFilters, state);
+  });
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -153,7 +161,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 { DataTable } from 'carbon-components-react';
-import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState } from '../../EmptyStates';
+import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState, EmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody,
   TableRow = DataTable.TableRow,
@@ -33,12 +33,13 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     action: emptyStateAction,
     link: emptyStateLink
   };
+  var validEmptyStates = ['error', 'noData', 'notFound'];
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
     role: false
   }), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
     colSpan: headers.length
-  }, 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, _event$target$parentN;
+      if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$parentN = _event$target.parentNode) !== null && _event$target$parentN !== void 0 && _event$target$parentN.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,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -32,7 +34,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;
@@ -47,6 +50,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"));
@@ -63,48 +69,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 ? 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 ? 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 ? 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 ? 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
@@ -115,6 +123,6 @@ var DatagridRow = function DatagridRow(datagridState) {
     }, restProps, {
       key: cell.column.id
     }), content);
-  }));
+  })), renderExpandedRow());
 };
 export default DatagridRow;

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -50,11 +50,23 @@ var SelectAll = function SelectAll(datagridState) {
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_getProps, _excluded);
+  var _ref = selectProps || {},
+    indeterminate = _ref.indeterminate;
+  var handleSelectAllChange = function handleSelectAllChange(event) {
+    if (indeterminate) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          checked: false
+        }
+      });
+    }
+    return onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: onChange,
+    onSelect: handleSelectAllChange,
     disabled: isFetching || selectProps.disabled,
     id: "".concat(tableId, "-select-all-checkbox-id")
   })));

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, 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.
@@ -70,20 +70,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
       flipped: true
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2) {
-        if (displayAllInMenu) {
-          return /*#__PURE__*/React.createElement(ButtonMenuItem, {
-            key: "".concat(batchAction.label, "-").concat(index),
-            itemText: batchAction.label,
-            onClick: function onClick() {
-              batchAction.onClick();
-              if (batchAction.type === 'select_all') {
-                toggleAllRowsSelected(true);
-              }
-            }
-          });
-        }
-        return null;
+      if (index < 2 && !displayAllInMenu) {
+        return;
       }
       return /*#__PURE__*/React.createElement(ButtonMenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),

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,166 +8,63 @@ 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 { Draggable16, Locked16 } from '@carbon/icons-react';
-import { useDrag, useDrop } from 'react-dnd';
 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");
-var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
   var id = _ref.id,
-    index = _ref.index,
-    listData = _ref.listData,
     children = _ref.children,
-    type = _ref.type,
+    classList = _ref.classList,
     disabled = _ref.disabled,
     ariaLabel = _ref.ariaLabel,
-    onGrab = _ref.onGrab,
-    onArrowKeyDown = _ref.onArrowKeyDown,
-    isFocused = _ref.isFocused,
     isSticky = _ref.isSticky,
-    moveElement = _ref.moveElement,
-    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();
-  var _useDrop = useDrop({
-      accept: DRAG_TYPE + type,
-      collect: function collect(monitor) {
-        return {
-          isOver: !!monitor.isOver()
-        };
-      },
-      drop: function drop(item) {
-        moveElement(item.index, index);
-      },
-      canDrop: function canDrop() {
-        return !disabled;
-      },
-      hover: function hover(item) {
-        var dragIndex = item.index;
-        var 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;
-      }
+    selected = _ref.selected;
+  var _useSortable = useSortable({
+      id: id
     }),
-    _useDrop2 = _slicedToArray(_useDrop, 2),
-    isOver = _useDrop2[0].isOver,
-    drop = _useDrop2[1];
-  var _useDrag = useDrag({
-      type: DRAG_TYPE + type,
-      item: {
-        id: id,
-        index: index
-      },
-      canDrag: function canDrag() {
-        return !disabled;
-      },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
-      }
-    }),
-    _useDrag2 = _slicedToArray(_useDrag, 3),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1],
-    preview = _useDrag2[2];
-  useEffect(function () {
-    if (isFocused && ref && ref.current) {
-      ref.current.focus();
-    }
-  }, [isFocused]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isGrabbed = _useState2[0],
-    setIsGrabbed = _useState2[1];
-  var _useState3 = useState(isFocused),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFocusedOnItem = _useState4[0],
-    setIsFocusedOnItem = _useState4[1];
-  drop(ref);
+    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(Locked16, null) : /*#__PURE__*/React.createElement(Draggable16, null)), 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;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -1,32 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * 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.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Checkbox } from 'carbon-components-react';
 import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import classNames from 'classnames';
 import { DraggableItemsList } from './DraggableItemsList';
+import uuidv4 from '../../../../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var getNextIndex = function getNextIndex(array, currentIndex, key) {
-  var newIndex = -1;
-  if (key === 'ArrowUp') {
-    newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : array.length - 1;
-  }
-  if (key === 'ArrowDown') {
-    newIndex = currentIndex + 1 < array.length ? currentIndex + 1 : 0;
-  }
-  return newIndex;
-};
 var Columns = function Columns(_ref) {
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
     filterString = _ref.filterString,
@@ -36,36 +25,26 @@ var Columns = function Columns(_ref) {
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
     selectAllLabel = _ref.selectAllLabel;
+  var listId = useRef(uuidv4()); // keep id between renders
+  var listRef = useRef(null);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
     setAriaRegionText = _React$useState2[1];
-  var _React$useState3 = React.useState(-1),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusIndex = _React$useState4[0],
-    setFocusIndex = _React$useState4[1];
-  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
-    var dragCard = columns[dragIndex];
+  // after a drag/drop action set the columns
+  var moveElement = React.useCallback(function (from, to) {
+    var fromCol = columns[from];
     setColumnsObject(update(columns, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
+      $splice: [[from, 1], [to, 0, fromCol]]
     }));
   }, [columns, setColumnsObject]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-column-list")
-  }, /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
+    className: "".concat(blockClass, "__customize-columns-column-list"),
+    ref: listRef
   }, /*#__PURE__*/React.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
-    onKeyDown: function onKeyDown(e) {
-      var nextIndex = getNextIndex(columns, focusIndex, e.key);
-      if (nextIndex >= 0) {
-        setFocusIndex(nextIndex);
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
@@ -87,16 +66,13 @@ var Columns = function Columns(_ref) {
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
   })), /*#__PURE__*/React.createElement(DraggableItemsList, {
+    id: listId.current,
     columns: columns,
     filterString: filterString,
-    focusIndex: focusIndex,
-    getNextIndex: getNextIndex,
     moveElement: moveElement,
-    onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
-    setColumnsObject: setColumnsObject,
-    setFocusIndex: setFocusIndex
-  }))));
+    onSelectColumn: onSelectColumn
+  })));
 };
 Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -75,6 +75,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     isDirty = _useState10[0],
     setIsDirty = _useState10[1];
   var onRequestClose = function onRequestClose() {
+    setColumnObjects(columnDefinitions);
     setIsTearsheetOpen(false);
   };
   var onRequestSubmit = function onRequestSubmit() {