@carbon/ibm-products 2.0.0-rc.15 → 2.0.0-rc.17

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

@@ -7,12 +7,11 @@ 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';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
-import { FilterFlyout } from '../Datagrid/addons/Filtering';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridActions = function DatagridActions(datagridState) {
   var selectedFlatRows = datagridState.selectedFlatRows,
@@ -22,15 +21,13 @@ export var DatagridActions = function DatagridActions(datagridState) {
       rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
       useDenseHeader = datagridState.useDenseHeader,
       filterProps = datagridState.filterProps,
-      getFilterFlyoutProps = datagridState.getFilterFlyoutProps;
+      getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+      FilterFlyout = datagridState.FilterFlyout;
 
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
   };
 
-  var TableToolbarContent = DataTable.TableToolbarContent,
-      TableToolbarSearch = DataTable.TableToolbarSearch;
-
   var refreshColumns = function refreshColumns() {
     alert('refreshing...');
   };

package/es/components/index.js

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';

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),
@@ -171,7 +170,8 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
       batchActions = datagridState.batchActions,
-      state = datagridState.state;
+      state = datagridState.state,
+      rowSize = datagridState.rowSize;
 
   var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
       filterTags = _useContext.filterTags,
@@ -186,12 +186,13 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
     });
   };
 
+  var getRowHeight = rowSize ? rowSize : 'lg';
   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(_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), 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

@@ -178,7 +178,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

package/lib/components/Datagrid/useFiltering.js

@@ -13,6 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+var _Filtering = require("./Datagrid/addons/Filtering");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (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; }
@@ -85,7 +87,8 @@ var useFiltering = function useFiltering(hooks) {
     Object.assign(instance, {
       filterProps: _objectSpread(_objectSpread({}, defaultProps), instance.filterProps),
       filterTypes: filterTypes,
-      getFilterFlyoutProps: getFilterFlyoutProps
+      getFilterFlyoutProps: getFilterFlyoutProps,
+      FilterFlyout: _Filtering.FilterFlyout
     });
   });
 };

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

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

@@ -23,8 +23,6 @@ var _settings = require("../../../settings");
 
 var _ButtonMenu = require("../../ButtonMenu");
 
-var _Filtering = require("../Datagrid/addons/Filtering");
-
 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; }
@@ -45,15 +43,13 @@ var DatagridActions = function DatagridActions(datagridState) {
       rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
       useDenseHeader = datagridState.useDenseHeader,
       filterProps = datagridState.filterProps,
-      getFilterFlyoutProps = datagridState.getFilterFlyoutProps;
+      getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+      FilterFlyout = datagridState.FilterFlyout;
 
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
   };
 
-  var TableToolbarContent = _react2.DataTable.TableToolbarContent,
-      TableToolbarSearch = _react2.DataTable.TableToolbarSearch;
-
   var refreshColumns = function refreshColumns() {
     alert('refreshing...');
   };
@@ -67,7 +63,7 @@ var DatagridActions = function DatagridActions(datagridState) {
   };
 
   var renderFilterFlyout = function renderFilterFlyout() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterFlyout, getFilterFlyoutProps());
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
   };
 
   var _useState = (0, _react.useState)(false),
@@ -92,7 +88,7 @@ var DatagridActions = function DatagridActions(datagridState) {
   }, []);
   var mobileToolbar = size < 672 ? true : false;
   var items = ['Option 1', 'Option 2', 'Option 3'];
-  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, {
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, {
     size: "sm"
   }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: style
@@ -139,7 +135,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -180,7 +176,7 @@ var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
-  }))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+  }))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,

package/lib/components/index.js

@@ -339,6 +339,12 @@ Object.defineProperty(exports, "useActionsColumn", {
     return _Datagrid.useActionsColumn;
   }
 });
+Object.defineProperty(exports, "useColumnCenterAlign", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useColumnCenterAlign;
+  }
+});
 Object.defineProperty(exports, "useColumnOrder", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.15",
+  "version": "2.0.0-rc.17",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "cb84c9271bd62df43c4dba8651c58d9f78bfa2c0"
+  "gitHead": "021be71196091ea4e51acabe6718f8f680ba7604"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -481,7 +481,6 @@
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
   position: relative;
 }
-
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
@@ -603,3 +602,10 @@
   .#{c4p-settings.$carbon-prefix}--modal-container {
   position: absolute;
 }
+
+.#{$block-class}__table-toolbar--sm,
+.#{$block-class}__table-toolbar--xs {
+  .#{c4p-settings.$pkg-prefix}--filter-summary {
+    padding: 0 $spacing-03;
+  }
+}

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -7,6 +7,8 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/motion' as *;
 @use './variables';
 
 .#{variables.$block-class}__draggable-handleStyle {
@@ -27,7 +29,6 @@
 .#{variables.$block-class}__draggable-handleHolder {
   display: flex;
   height: $spacing-09;
-  padding-left: $spacing-05;
   border-bottom: 1px solid $layer-active;
   background-color: $layer;
 }
@@ -39,7 +40,6 @@
 .#{variables.$block-class}__draggable-handleHolder-selected {
   display: flex;
   height: $spacing-09;
-  padding-left: $spacing-05;
   border-bottom: 1px solid $layer-active;
   background-color: $layer-selected;
 }
@@ -50,13 +50,23 @@
 
 .#{variables.$block-class}__draggable-handleHolder-isOver {
   border: 2px dashed $focus;
-  background-color: $layer-selected-hover-01;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: colors.$blue-10;
 }
 
 .#{variables.$block-class}__draggable-handleHolder-droppable {
   display: flex;
   width: 100%;
   align-items: center;
+  padding-left: $spacing-05;
+  /* stylelint-disable-next-line carbon/type-token-use */
+  line-height: 1; // center align text within row
+  transition-property: opacity;
+}
+
+.#{variables.$block-class}__draggable-handleHolder-droppable.#{variables.$block-class}__draggable-handleHolder-droppable--origin {
+  opacity: 0.5;
+  transition: opacity $duration-moderate-01 motion(entrance, productive);
 }
 
 .#{variables.$block-class}__draggable-handleHolder-grabbed {

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -19,7 +19,7 @@
 
 .#{variables.$block-class} .#{variables.$block-class}__expanded-row-content {
   position: relative;
-  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-09;
+  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-10;
 }
 
 .#{variables.$block-class}

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -31,7 +31,11 @@
 .#{variables.$block-class}__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  padding-left: $spacing-03;
+  padding-left: $spacing-02;
+}
+
+.#{variables.$block-class}__customize-columns-column-list
+  .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
   margin-bottom: 0;
 }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -203,7 +203,7 @@ $motion-duration: $duration-moderate-02;
       max-width: 60%;
     }
 
-    word-break: break-all;
+    word-break: break-word;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {