@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

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

@@ -1,36 +1,22 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = require("@carbon/react/icons");
-
 var _reactDnd = require("react-dnd");
-
 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; }
-
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -38,116 +24,111 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 var useEffect = React.useEffect,
-    useRef = React.useRef,
-    useState = React.useState;
+  useRef = React.useRef,
+  useState = React.useState;
 var blockClass = "".concat(_settings.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,
-      disabled = _ref.disabled,
-      ariaLabel = _ref.ariaLabel,
-      onGrab = _ref.onGrab,
-      onArrowKeyDown = _ref.onArrowKeyDown,
-      isFocused = _ref.isFocused,
-      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;
+    index = _ref.index,
+    listData = _ref.listData,
+    children = _ref.children,
+    type = _ref.type,
+    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 = (0, _reactDnd.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;
+      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;
       }
-
-      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;
-    }
-  }),
-      _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-      isOver = _useDrop2[0].isOver,
-      drop = _useDrop2[1];
-
+    }),
+    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
+    isOver = _useDrop2[0].isOver,
+    drop = _useDrop2[1];
   var _useDrag = (0, _reactDnd.useDrag)({
-    type: DRAG_TYPE + type,
-    item: {
-      id: id,
-      index: index
-    },
-    canDrag: function canDrag() {
-      return !disabled;
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    }
-  }),
-      _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 3),
-      isDragging = _useDrag2[0].isDragging,
-      drag = _useDrag2[1],
-      preview = _useDrag2[2];
-
+      type: DRAG_TYPE + type,
+      item: {
+        id: id,
+        index: index
+      },
+      canDrag: function canDrag() {
+        return !disabled;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useState, 2),
-      isGrabbed = _useState2[0],
-      setIsGrabbed = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isGrabbed = _useState2[0],
+    setIsGrabbed = _useState2[1];
   var _useState3 = useState(isFocused),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isFocusedOnItem = _useState4[0],
-      setIsFocusedOnItem = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isFocusedOnItem = _useState4[0],
+    setIsFocusedOnItem = _useState4[1];
   drop(ref);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_icons.Draggable, {
+  }, isSticky ? /*#__PURE__*/React.createElement(_icons.Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.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"), !selected), _cx)),
+    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",
@@ -178,7 +159,7 @@ var DraggableElement = function DraggableElement(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "${blockClass}__draggable-handleHolder-droppable"
+    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
@@ -186,7 +167,6 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, (!isOver || disabled) && content));
 };
-
 DraggableElement.propTypes = {
   ariaLabel: _propTypes.default.string.isRequired,
   children: _propTypes.default.element.isRequired,
@@ -196,6 +176,7 @@ DraggableElement.propTypes = {
   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.default.func.isRequired,
   onArrowKeyDown: _propTypes.default.func.isRequired,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -1,47 +1,35 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = require("@carbon/react");
-
 var React = _interopRequireWildcard(require("react"));
-
 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; }
-
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var Actions = function Actions(_ref) {
   var searchText = _ref.searchText,
-      setSearchText = _ref.setSearchText,
-      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
+    setSearchText = _ref.setSearchText,
+    findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(_react.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "lg",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?
@@ -49,7 +37,6 @@ var Actions = function Actions(_ref) {
     }
   }));
 };
-
 Actions.propTypes = {
   columns: _propTypes.default.array.isRequired,
   findColumnPlaceholderLabel: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -1,43 +1,35 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = require("@carbon/react/icons");
-
 var _react2 = require("@carbon/react");
-
 var _settings = require("../../../../../settings");
-
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
-
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
 var ButtonWrapper = function ButtonWrapper(_ref) {
   var _onClick = _ref.onClick,
-      setIsModalOpen = _ref.setIsModalOpen,
-      isModalOpen = _ref.isModalOpen,
-      _ref$iconTooltipLabel = _ref.iconTooltipLabel,
-      iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+    isTearsheetOpen = _ref.isTearsheetOpen,
+    _ref$iconTooltipLabel = _ref.iconTooltipLabel,
+    iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React.createElement(_icons.Column, (0, _extends2.default)({
@@ -50,23 +42,21 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
-
+      setIsTearsheetOpen(!isTearsheetOpen);
       if (typeof _onClick === 'function') {
         _onClick();
       }
     }
   }));
 };
-
 ButtonWrapper.defaultProps = {
   onClick: function onClick() {}
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: _propTypes.default.string,
-  isModalOpen: _propTypes.default.bool.isRequired,
+  isTearsheetOpen: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func.isRequired,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
 var _default = ButtonWrapper;
 exports.default = _default;

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

@@ -1,90 +1,63 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactDnd = require("react-dnd");
-
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
-
 var _react2 = require("@carbon/react");
-
 var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
-
 var _settings = require("../../../../../settings");
-
-var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
-
-var _common = require("./common");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+var _DraggableItemsList = require("./DraggableItemsList");
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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 blockClass = "".concat(_settings.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 _cx;
-
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
-      filterString = _ref.filterString,
-      columns = _ref.columns,
-      setColumnsObject = _ref.setColumnsObject,
-      onSelectColumn = _ref.onSelectColumn,
-      assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
-      assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-      selectAllLabel = _ref.selectAllLabel;
-
+    filterString = _ref.filterString,
+    columns = _ref.columns,
+    setColumnsObject = _ref.setColumnsObject,
+    onSelectColumn = _ref.onSelectColumn,
+    assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
+    selectAllLabel = _ref.selectAllLabel,
+    isTableSortable = _ref.isTableSortable;
   var _React$useState = _react.default.useState(''),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      ariaRegionText = _React$useState2[0],
-      setAriaRegionText = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    ariaRegionText = _React$useState2[0],
+    setAriaRegionText = _React$useState2[1];
   var _React$useState3 = _react.default.useState(-1),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      focusIndex = _React$useState4[0],
-      setFocusIndex = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    focusIndex = _React$useState4[0],
+    setFocusIndex = _React$useState4[1];
   var moveElement = _react.default.useCallback(function (dragIndex, hoverIndex) {
     var dragCard = columns[dragIndex];
     setColumnsObject((0, _immutabilityHelper.default)(columns, {
       $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
     }));
   }, [columns, setColumnsObject]);
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list")
   }, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
@@ -95,19 +68,13 @@ var Columns = function Columns(_ref) {
     "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,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
@@ -116,7 +83,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
     id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
     className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -127,51 +94,19 @@ var Columns = function Columns(_ref) {
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
-  })), columns.filter(function (colDef) {
-    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
-  }).map(function (colDef, i) {
-    return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
-      key: colDef.id,
-      index: i,
-      listData: columns,
-      setListData: setColumnsObject,
-      id: "dnd-datagrid-columns-".concat(colDef.id),
-      type: "column-customization",
-      disabled: filterString.length > 0,
-      ariaLabel: colDef.Header.props.title,
-      onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      moveElement: moveElement,
-      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
-        if (isGrabbed) {
-          var nextIndex = getNextIndex(columns, currentIndex, e.key);
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (nextIndex >= 0) {
-            setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
-            e.target.scrollIntoView({
-              block: 'center'
-            });
-          }
-        }
-      },
-      selected: (0, _common.isColumnVisible)(colDef)
-    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
-      checked: (0, _common.isColumnVisible)(colDef),
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
-        return onSelectColumn(colDef, checked);
-      },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title
-    }));
+  })), /*#__PURE__*/_react.default.createElement(_DraggableItemsList.DraggableItemsList, {
+    columns: columns,
+    filterString: filterString,
+    focusIndex: focusIndex,
+    getNextIndex: getNextIndex,
+    isTableSortable: isTableSortable,
+    moveElement: moveElement,
+    onSelectColumn: onSelectColumn,
+    setAriaRegionText: setAriaRegionText,
+    setColumnsObject: setColumnsObject,
+    setFocusIndex: setFocusIndex
   }))));
 };
-
 Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
   assistiveTextInstructionsLabel: _propTypes.default.string,
@@ -180,6 +115,7 @@ Columns.propTypes = {
   filterString: _propTypes.default.string.isRequired,
   getVisibleColumnsCount: _propTypes.default.func.isRequired,
   instructionsLabel: _propTypes.default.string,
+  isTableSortable: _propTypes.default.bool.isRequired,
   onSelectColumn: _propTypes.default.func.isRequired,
   selectAllLabel: _propTypes.default.string,
   setColumnStatus: _propTypes.default.func,