@carbon/ibm-products 2.0.0-rc.16 → 2.0.0-rc.18

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

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useContext, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { DataTable } from '@carbon/react';
+import { Table, TableContainer } from '@carbon/react';
 import { px } from '@carbon/layout';
 import DatagridHead from './DatagridHead';
 import DatagridBody from './DatagridBody';
@@ -21,8 +21,6 @@ import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
 import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
-var TableContainer = DataTable.TableContainer,
-    Table = DataTable.Table;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridContent = function DatagridContent(_ref) {
   var _cx4;

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

@@ -9,12 +9,9 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import React from 'react';
 import { pkg } from '../../../settings';
-import { DataTable } from '@carbon/react';
+import { TableBody, TableRow, TableCell } from '@carbon/react';
 import { NoDataEmptyState, ErrorEmptyState } from '../../EmptyStates';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody,
-    TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell;
 
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,

package/es/components/Datagrid/Datagrid/DatagridHead.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { DataTable } from '@carbon/react';
-var TableHead = DataTable.TableHead;
+import { TableHead } from '@carbon/react';
 
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { DataTable } from '@carbon/react';
+import { TableHeader, TableRow } from '@carbon/react';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -41,9 +41,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   }));
 };
 
-var TableHeader = DataTable.TableHeader,
-    TableRow = DataTable.TableRow;
-
 var useHeaderRow = function useHeaderRow(hooks) {
   var useInstance = function useInstance(instance) {
     Object.assign(instance, {

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

@@ -12,14 +12,12 @@ var _excluded = ["children"];
  */
 // @flow
 import React from 'react';
-import { DataTable, SkeletonText } from '@carbon/react';
+import { TableRow, TableCell, SkeletonText } from '@carbon/react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell;
 var rowHeights = {
   xs: 24,
   sm: 32,

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

@@ -12,7 +12,7 @@ var _excluded = ["onChange"];
  */
 // @flow
 import React from 'react';
-import { DataTable } from '@carbon/react';
+import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -53,5 +53,4 @@ var SelectAll = function SelectAll(datagridState) {
   })));
 };
 
-var TableSelectAll = DataTable.TableSelectAll;
 export { SelectAll };

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -13,11 +13,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { DataTable } from '@carbon/react';
+import { TableBody } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody;
 
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,

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

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import React, { useEffect, useState, useContext } from 'react';
 import { Add, OverflowMenuVertical } from '@carbon/react/icons';
-import { DataTable, TableBatchActions, TableBatchAction } from '@carbon/react';
+import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
 import { useResizeDetector } from 'react-resize-detector';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
@@ -18,7 +18,6 @@ import { FilterSummary } from '../../FilterSummary';
 import { FilterContext } from './addons/Filtering/FilterProvider';
 import { CLEAR_FILTERS } from './addons/Filtering/constants';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableToolbar = DataTable.TableToolbar;
 
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = useState(false),

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -14,12 +14,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
-import { DataTable } from '@carbon/react';
+import { TableBody } from '@carbon/react';
 import { pkg } from '../../../settings';
 import DatagridHead from './DatagridHead';
 import { px } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var TableBody = DataTable.TableBody;
 var rowSizeMap = {
   xs: 24,
   sm: 32,

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable } from '@carbon/react/icons';
+import { Draggable, Locked } from '@carbon/react/icons';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -34,6 +34,7 @@ var DraggableElement = function DraggableElement(_ref) {
       onGrab = _ref.onGrab,
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
+      isSticky = _ref.isSticky,
       moveElement = _ref.moveElement,
       selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
@@ -120,11 +121,13 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable, {
+  }, isSticky ? /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(Draggable, {
     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"), !selected), _cx)),
+    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",
@@ -155,7 +158,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
@@ -173,6 +176,7 @@ DraggableElement.propTypes = {
   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,

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

@@ -103,9 +103,11 @@ var Columns = function Columns(_ref) {
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
       className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
       checked: isColumnVisible(colDef),
+      disabled: isFrozenColumn,
       onChange: function onChange(_, _ref2) {
         var checked = _ref2.checked;
         return onSelectColumn(colDef, checked);
@@ -126,18 +128,21 @@ var Columns = function Columns(_ref) {
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      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) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({

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

@@ -63,7 +63,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
 
   var _useState7 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!colDef.Header.props;
+    return !!colDef.Header.props && !colDef.isAction;
   }) // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = isColumnVisible(defA);

package/es/components/Datagrid/useSelectRows.js

@@ -18,11 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { DataTable } from '@carbon/react';
+import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
 import { pkg, carbon } from '../../settings';
-var TableSelectRow = DataTable.TableSelectRow;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {

package/es/components/Datagrid/utils/DatagridActions.js

@@ -7,7 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 import React, { useLayoutEffect, useState } from 'react';
-import { DataTable, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
+import { TableToolbarContent, TableToolbarSearch, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
 import { Download, Add, Restart, ChevronDown } from '@carbon/react/icons';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
@@ -28,9 +28,6 @@ export var DatagridActions = function DatagridActions(datagridState) {
     alert('Downloading...');
   };
 
-  var TableToolbarContent = DataTable.TableToolbarContent,
-      TableToolbarSearch = DataTable.TableToolbarSearch;
-
   var refreshColumns = function refreshColumns() {
     alert('refreshing...');
   };

package/es/global/js/package-settings.js

@@ -37,6 +37,7 @@ var defaults = {
     ImportModal: true,
     InlineEdit: true,
     InlineEditV1: true,
+    MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -48,6 +49,7 @@ var defaults = {
     RemoveModal: true,
     Saving: true,
     SidePanel: true,
+    SingleAddSelect: true,
     StatusIcon: true,
     TagSet: true,
     Tearsheet: true,
@@ -58,8 +60,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    MultiAddSelect: false,
-    SingleAddSelect: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,

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

@@ -51,8 +51,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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 TableContainer = _react2.DataTable.TableContainer,
-    Table = _react2.DataTable.Table;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var DatagridContent = function DatagridContent(_ref) {
@@ -110,7 +108,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
 
-    return /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
       className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit && 'grid',
       tabIndex: withInlineEdit && 0,
@@ -154,7 +152,7 @@ var DatagridContent = function DatagridContent(_ref) {
       gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
     className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
     title: gridTitle,
     description: gridDescription

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

@@ -25,9 +25,6 @@ var _EmptyStates = require("../../EmptyStates");
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _react2.DataTable.TableBody,
-    TableRow = _react2.DataTable.TableRow,
-    TableCell = _react2.DataTable.TableCell;
 
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
@@ -40,9 +37,9 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       illustrationTheme = datagridState.illustrationTheme,
       emptyStateAction = datagridState.emptyStateAction,
       emptyStateLink = datagridState.emptyStateLink;
-  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
-  }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
     colSpan: headers.length
   }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
     illustrationTheme: illustrationTheme,

package/lib/components/Datagrid/Datagrid/DatagridHead.js

@@ -17,14 +17,12 @@ var _react2 = require("@carbon/react");
  * 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 TableHead = _react2.DataTable.TableHead;
-
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,
       headerGroups = _datagridState$header === void 0 ? [] : _datagridState$header,
       headRef = datagridState.headRef,
       HeaderRow = datagridState.HeaderRow;
-  return /*#__PURE__*/_react.default.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableHead, null, headerGroups.map(function (headerGroup) {
     return (// doesn't support header grouping.
       HeaderRow(datagridState, headRef, headerGroup)
     );

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -31,7 +31,7 @@ var _settings = require("../../../settings");
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref) {
@@ -47,7 +47,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
@@ -56,9 +56,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   }));
 };
 
-var TableHeader = _react2.DataTable.TableHeader,
-    TableRow = _react2.DataTable.TableRow;
-
 var useHeaderRow = function useHeaderRow(hooks) {
   var useInstance = function useInstance(instance) {
     Object.assign(instance, {

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

@@ -27,8 +27,6 @@ var _settings = require("../../../settings");
 
 var _excluded = ["children"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableRow = _react2.DataTable.TableRow,
-    TableCell = _react2.DataTable.TableCell;
 var rowHeights = {
   xs: 24,
   sm: 32,
@@ -59,7 +57,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     return size;
   };
 
-  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
     className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
   }, row.getRowProps(), {
     key: row.id,
@@ -98,7 +96,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_react2.TableCell, (0, _extends2.default)({
       className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -52,7 +52,7 @@ var SelectAll = function SelectAll(datagridState) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
-  }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,
     disabled: isFetching || selectProps.disabled,
@@ -60,5 +60,4 @@ var SelectAll = function SelectAll(datagridState) {
   })));
 };
 
-exports.SelectAll = SelectAll;
-var TableSelectAll = _react2.DataTable.TableSelectAll;
+exports.SelectAll = SelectAll;

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -24,13 +24,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { (0, _defineProperty2.default)(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; }
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _react2.DataTable.TableBody;
 
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
       rows = datagridState.rows,
       prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -44,7 +44,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * LICENSE file in the root directory of this source tree.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableToolbar = _react2.DataTable.TableToolbar;
 
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = (0, _react.useState)(false),
@@ -191,9 +190,9 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref)), renderFilterSummary()) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : null;
 };
 
 var _default = DatagridToolbar;

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -34,7 +34,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { (0, _defineProperty2.default)(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; }
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _react2.DataTable.TableBody;
 var rowSizeMap = {
   xs: 24,
   sm: 32,
@@ -90,7 +89,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     onScroll: function onScroll(e) {
       return syncScroll(e);
     }

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

@@ -57,6 +57,7 @@ var DraggableElement = function DraggableElement(_ref) {
       onGrab = _ref.onGrab,
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
+      isSticky = _ref.isSticky,
       moveElement = _ref.moveElement,
       selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
@@ -143,11 +144,13 @@ var DraggableElement = function DraggableElement(_ref) {
     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 +181,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
@@ -196,6 +199,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/Columns.js

@@ -124,10 +124,12 @@ var Columns = function Columns(_ref) {
     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);
@@ -149,18 +151,21 @@ var Columns = function Columns(_ref) {
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      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) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({

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

@@ -79,7 +79,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
 
   var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!colDef.Header.props;
+    return !!colDef.Header.props && !colDef.isAction;
   }) // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = (0, _common.isColumnVisible)(defA);

package/lib/components/Datagrid/useSelectRows.js

@@ -33,7 +33,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
-var TableSelectRow = _react2.DataTable.TableSelectRow;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -102,7 +101,7 @@ var SelectRow = function SelectRow(datagridState) {
 
   var cellProps = cell.getCellProps();
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
-  return /*#__PURE__*/_react.default.createElement(TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
       e.stopPropagation(); // avoid triggering onRowClick