@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.26

package/lib/components/AddSelect/AddSelectRow.js

@@ -0,0 +1,247 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddSelectRow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@carbon/react");
+
+var _icons = require("@carbon/react/icons");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+var _AddSelectFormControl = require("./AddSelectFormControl");
+
+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
+//
+// 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, "--add-select__selections");
+var componentName = 'AddSelectList';
+
+var AddSelectRow = function AddSelectRow(_ref) {
+  var _modifiers$options, _cx;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
+      index = _ref.index,
+      focus = _ref.focus,
+      item = _ref.item,
+      metaIconDescription = _ref.metaIconDescription,
+      modifiers = _ref.modifiers,
+      multi = _ref.multi,
+      multiSelection = _ref.multiSelection,
+      navIconDescription = _ref.navIconDescription,
+      parentId = _ref.parentId,
+      setAppliedModifiers = _ref.setAppliedModifiers,
+      setDisplayMetaPanel = _ref.setDisplayMetaPanel,
+      setFocus = _ref.setFocus,
+      setMultiSelection = _ref.setMultiSelection,
+      setParentSelected = _ref.setParentSelected,
+      setSingleSelection = _ref.setSingleSelection,
+      singleSelection = _ref.singleSelection;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (focus === index) {
+      ref.current.focus();
+    }
+  }, [focus, index]);
+
+  var isSelected = function isSelected() {
+    if (multi) {
+      return multiSelection.includes(item.id);
+    }
+
+    return item.id === singleSelection;
+  };
+
+  var getTabIndex = function getTabIndex() {
+    // on initial load make the first item tabbable
+    if (index === 0 && focus === '') {
+      return 0;
+    } // make it so only the last focused item is tabbable
+
+
+    if (focus === index && focus !== '') {
+      return 0;
+    } // make unfocused items un-tabbable
+
+
+    return -1;
+  };
+
+  var focusHandler = (0, _react.useCallback)(function (reset) {
+    setFocus(reset ? '' : index);
+  }, [setFocus, index]);
+
+  var handleSingleSelection = function handleSingleSelection() {
+    setSingleSelection(item.id);
+  };
+
+  var onSelectKeyDown = function onSelectKeyDown(_ref2) {
+    var key = _ref2.key;
+
+    if (key === 'Enter' || key === ' ') {
+      if (multi) {
+        handleMultiSelection();
+      } else {
+        handleSingleSelection();
+      }
+    } else if (key === 'ArrowRight' && item.children) {
+      onNavigateItem();
+    }
+  };
+
+  var handleMultiSelection = function handleMultiSelection() {
+    var checked = isSelected();
+
+    if (!checked) {
+      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [item.id]);
+      setMultiSelection(newValues);
+    } else {
+      var _newValues = multiSelection.filter(function (v) {
+        return v !== item.id;
+      });
+
+      setMultiSelection(_newValues);
+    }
+  };
+
+  var onNavigateItem = function onNavigateItem() {
+    focusHandler(true);
+    setParentSelected(item.id, item.title, parentId);
+  };
+
+  var modifierHandler = function modifierHandler(id, selectedItem) {
+    var modifiersClone = (0, _toConsumableArray2.default)(appliedModifiers);
+    var modifierIdx = modifiersClone.findIndex(function (item) {
+      return item.id === id;
+    });
+    modifiersClone[modifierIdx] = (0, _defineProperty2.default)({
+      id: id
+    }, modifiers.id, selectedItem);
+    setAppliedModifiers(modifiersClone);
+  };
+
+  var metaPanelHandler = function metaPanelHandler() {
+    if (item.meta) {
+      setDisplayMetaPanel(item);
+    }
+  };
+
+  var isInMetaPanel = function isInMetaPanel(id) {
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+  };
+
+  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var tabIndex = getTabIndex();
+  var selected = isSelected();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx)),
+    onKeyDown: onSelectKeyDown,
+    tabIndex: tabIndex,
+    ref: ref,
+    role: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-cell")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-cell-wrapper")
+  }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
+    type: "checkbox",
+    item: item,
+    selected: selected,
+    onClick: handleMultiSelection
+  }), hasModifiers && /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    id: "add-select-modifier-".concat(item.id),
+    type: "inline",
+    items: modifiers.options,
+    label: modifiers.label,
+    disabled: !isSelected(item.id),
+    className: "".concat(blockClass, "-dropdown"),
+    initialSelectedItem: item[modifiers.id],
+    onChange: function onChange(_ref3) {
+      var selectedItem = _ref3.selectedItem;
+      return modifierHandler(item.id, selectedItem);
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
+    type: "radio",
+    item: item,
+    selected: selected,
+    onClick: handleSingleSelection
+  }), item.children && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    className: "".concat(blockClass, "-view-children"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    iconDescription: navIconDescription,
+    tooltipPosition: "left",
+    tooltipAlignment: "center",
+    hasIconOnly: true,
+    onClick: onNavigateItem,
+    kind: "ghost",
+    size: "sm"
+  }), item.meta && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    className: "".concat(blockClass, "-view-meta"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.View, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    iconDescription: metaIconDescription,
+    tooltipPosition: "left",
+    tooltipAlignment: "center",
+    hasIconOnly: true,
+    kind: "ghost",
+    size: "sm",
+    onClick: metaPanelHandler
+  }))));
+};
+
+exports.AddSelectRow = AddSelectRow;
+AddSelectRow.propTypes = {
+  appliedModifiers: _propTypes.default.array,
+  displayMetalPanel: _propTypes.default.object,
+  filteredItems: _propTypes.default.array,
+  focus: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  index: _propTypes.default.number,
+  item: _propTypes.default.object,
+  metaIconDescription: _propTypes.default.string,
+  modifiers: _propTypes.default.object,
+  multi: _propTypes.default.bool,
+  multiSelection: _propTypes.default.array,
+  navIconDescription: _propTypes.default.string,
+  parentId: _propTypes.default.string,
+  setAppliedModifiers: _propTypes.default.func,
+  setDisplayMetaPanel: _propTypes.default.func,
+  setFocus: _propTypes.default.func,
+  setMultiSelection: _propTypes.default.func,
+  setParentSelected: _propTypes.default.func,
+  setSingleSelection: _propTypes.default.func,
+  singleSelection: _propTypes.default.string
+};
+AddSelectRow.displayName = componentName;

package/lib/components/AddSelect/hooks/useFocus.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useFocus = function useFocus(size) {
+  // the state should represent the location of the item in the array
+  // make it '' initially so that it doesn't automatically focus the first item
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentFocus = _useState2[0],
+      setCurrentFocus = _useState2[1];
+
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var focus = currentFocus === '' ? 0 : currentFocus;
+
+    if (e.keyCode === 40) {
+      // Down arrow
+      e.preventDefault();
+      setCurrentFocus(focus === size - 1 ? 0 : focus + 1);
+    } else if (e.keyCode === 38) {
+      // Up arrow
+      e.preventDefault();
+      setCurrentFocus(focus === 0 ? size - 1 : focus - 1);
+    }
+  }, [size, currentFocus, setCurrentFocus]);
+  (0, _react.useEffect)(function () {
+    var el = document.querySelector('#add-select-focus');
+    el.addEventListener('keydown', handleKeyDown, false);
+    return function () {
+      el.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+  return [currentFocus, setCurrentFocus];
+};
+
+var _default = useFocus;
+exports.default = _default;

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

@@ -139,7 +139,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       setGlobalFilter(null);
     }
   }, !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) {
+    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
       return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,

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

@@ -25,12 +25,10 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _settings = require("../../../../../settings");
 
-var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
-
-var _common = require("./common");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _DraggableItemsList = require("./DraggableItemsList");
+
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -61,7 +59,8 @@ var Columns = function Columns(_ref) {
       onSelectColumn = _ref.onSelectColumn,
       assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
       assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-      selectAllLabel = _ref.selectAllLabel;
+      selectAllLabel = _ref.selectAllLabel,
+      isTableSortable = _ref.isTableSortable;
 
   var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -117,70 +116,17 @@ var Columns = function Columns(_ref) {
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
-  })), columns // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return !!colDef.Header.props && !!colDef.Header.props.title;
-  }).filter(function (colDef) {
-    return !colDef.isAction;
-  }).filter(function (colDef) {
-    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
-  }).map(function (colDef, i) {
-    var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
-    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
-    var isFrozenColumn = !!colDef.sticky;
-
-    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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),
-      disabled: isFrozenColumn,
-      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,
-      hideLabel: true
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: highlightedText
-      }
-    }));
-
-    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 || isFrozenColumn,
-      ariaLabel: colDef.Header.props.title,
-      onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      isSticky: isFrozenColumn,
-      moveElement: moveElement,
-      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
-        if (isGrabbed) {
-          var _columns$nextIndex;
-
-          var nextIndex = getNextIndex(columns, currentIndex, e.key);
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
-            setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
-            e.target.scrollIntoView({
-              block: 'center'
-            });
-          }
-        }
-      },
-      selected: (0, _common.isColumnVisible)(colDef)
-    }, listContents);
+  })), /*#__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
   }))));
 };
 
@@ -192,6 +138,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,

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

@@ -60,7 +60,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
       assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
       _ref$selectAllLabel = _ref.selectAllLabel,
-      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
+      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
+      isTableSortable = _ref.isTableSortable;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -183,7 +184,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
   }));
 };
 
@@ -195,6 +197,7 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
+  isTableSortable: _propTypes.default.bool.isRequired,
   onSaveColumnPrefs: _propTypes.default.func.isRequired,
   originalColumnDefinitions: _propTypes.default.array.isRequired,
   primaryButtonTextLabel: _propTypes.default.string,

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

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableItemsList = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _react2 = require("@carbon/react");
+
+var _common = require("./common");
+
+var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
+
+var _settings = require("../../../../../settings");
+
+/**
+ * Copyright IBM Corp. 2023, 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 DraggableItemsList = function DraggableItemsList(_ref) {
+  var columns = _ref.columns,
+      filterString = _ref.filterString,
+      focusIndex = _ref.focusIndex,
+      getNextIndex = _ref.getNextIndex,
+      isTableSortable = _ref.isTableSortable,
+      moveElement = _ref.moveElement,
+      onSelectColumn = _ref.onSelectColumn,
+      setAriaRegionText = _ref.setAriaRegionText,
+      setColumnsObject = _ref.setColumnsObject,
+      setFocusIndex = _ref.setFocusIndex;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    var _colDef$Header$props$, _colDef$Header$props;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
+    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
+  }).filter(function (colDef) {
+    return !colDef.isAction;
+  }).filter(function (colDef) {
+    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+  }).map(function (colDef, i) {
+    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+
+    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var isFrozenColumn = !!colDef.sticky;
+
+    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      },
+      className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
+    }));
+
+    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 || isFrozenColumn,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var _columns$nextIndex;
+
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      },
+      isSticky: isFrozenColumn,
+      selected: (0, _common.isColumnVisible)(colDef)
+    }, listContents);
+  }));
+};
+
+exports.DraggableItemsList = DraggableItemsList;
+DraggableItemsList.propTypes = {
+  columns: _propTypes.PropTypes.array.isRequired,
+  filterString: _propTypes.PropTypes.string.isRequired,
+  focusIndex: _propTypes.PropTypes.number.isRequired,
+  getNextIndex: _propTypes.PropTypes.func.isRequired,
+  isTableSortable: _propTypes.PropTypes.bool,
+  moveElement: _propTypes.PropTypes.func.isRequired,
+  onSelectColumn: _propTypes.PropTypes.func.isRequired,
+  setAriaRegionText: _propTypes.PropTypes.func.isRequired,
+  setColumnsObject: _propTypes.PropTypes.func.isRequired,
+  setFocusIndex: _propTypes.PropTypes.func.isRequired
+};

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

@@ -35,6 +35,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
     isOpen: isTearsheetOpen,
+    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -11,8 +11,6 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -31,7 +29,7 @@ var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
 
 var _settings = require("../../../../../settings");
 
-var _excluded = ["legendText"];
+var _excluded = ["align", "legendText"];
 
 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); }
 
@@ -40,7 +38,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$legendText = _ref.legendText,
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+      _ref$legendText = _ref.legendText,
       legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -49,31 +49,38 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(_react2.Popover, {
-    align: "bottom-right",
-    caret: false,
-    dropShadow: false,
-    open: isOpen,
-    className: "".concat(blockClass, "__row-height-settings-popover")
-  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isOpen && /*#__PURE__*/React.createElement(_react2.IconButton, {
     kind: "ghost",
-    align: "left",
+    align: align,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     label: legendText,
-    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"))
+  }, /*#__PURE__*/React.createElement(_icons.Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(_react2.Toggletip, {
+    defaultOpen: true,
+    className: "".concat(blockClass, "__row-size-toggle-tip")
+  }, /*#__PURE__*/React.createElement(_react2.ToggletipButton, {
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-toggle-tip-button"), "".concat(blockClass, "__row-size-button--open")),
+    label: legendText
   }, /*#__PURE__*/React.createElement(_icons.Settings, {
     size: 16
-  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+  })), /*#__PURE__*/React.createElement(_react2.ToggletipContent, {
+    className: "".concat(blockClass, "__row-size-toggle-tip-content")
+  }, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
     legendText: legendText,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }
-  }))));
+  })))));
 };
 
 RowSizeDropdown.propTypes = {
+  align: _react2.IconButton.propTypes.align,
   datagridName: _propTypes.default.string,
   legendText: _propTypes.default.string,
   light: _propTypes.default.bool,