@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.20

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,9 +21,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react2 = require("@carbon/react");
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _settings = require("../../../settings");
 
@@ -37,6 +41,8 @@ var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
 
 var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var _columns$;
+
   var tableId = _ref.tableId,
       isFetching = _ref.isFetching,
       isAllRowsSelected = _ref.isAllRowsSelected,
@@ -46,7 +52,9 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       _ref$allPageRowsLabel = _ref.allPageRowsLabel,
       allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
       _ref$allRowsLabel = _ref.allRowsLabel,
-      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel;
+      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+      columns = _ref.columns,
+      withStickyColumn = _ref.withStickyColumn;
 
   var _useState = (0, _react.useState)(SELECT_ALL_PAGE_ROWS),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -75,10 +83,11 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
 
   var disabled = isFetching || selectProps.disabled;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/_react.default.createElement("th", {
     role: "columnheader",
     scope: "col",
-    className: "".concat(blockClass, "__select-all-toggle-on")
+    className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -90,7 +99,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     hideLabel: true
   }))), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_iconsReact.CaretDown, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(_icons.CaretDown, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -133,12 +142,14 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: _propTypes.default.string,
   allRowsLabel: _propTypes.default.string,
+  columns: _propTypes.default.arrayOf(_propTypes.default.object),
   getToggleAllPageRowsSelectedProps: _propTypes.default.func.isRequired,
   getToggleAllRowsSelectedProps: _propTypes.default.func.isRequired,
   isAllRowsSelected: _propTypes.default.bool.isRequired,
   isFetching: _propTypes.default.bool,
   selectAllToggle: _propTypes.default.object,
-  tableId: _propTypes.default.string.isRequired
+  tableId: _propTypes.default.string.isRequired,
+  withStickyColumn: _propTypes.default.bool
 };
 var _default = SelectAllWithToggle;
 exports.default = _default;

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

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -38,7 +38,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),
@@ -58,7 +57,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
   var selectedFlatRows = datagridState.selectedFlatRows,
       toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      toolbarBatchActions = datagridState.toolbarBatchActions;
+      toolbarBatchActions = datagridState.toolbarBatchActions,
+      setGlobalFilter = datagridState.setGlobalFilter;
   var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
@@ -90,10 +90,11 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
       label: width > minWidthBeforeOverflowIcon ? 'More' : null,
-      renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add : _iconsReact.OverflowMenuVertical,
+      renderIcon: width > minWidthBeforeOverflowIcon ? _icons.Add : _icons.OverflowMenuVertical,
       className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
-      flipped: true
+      flipped: true,
+      menuAriaLabel: 'Batch actions'
     }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
       if (index < 2) {
         if (displayAllInMenu) {
@@ -134,7 +135,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
-      return toggleAllRowsSelected(false);
+      toggleAllRowsSelected(false);
+      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) {
@@ -161,13 +163,15 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
 
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions;
+      batchActions = datagridState.batchActions,
+      rowSize = datagridState.rowSize;
+  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))) : 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))) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 
 var _default = DatagridToolbar;

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

@@ -21,6 +21,10 @@ var _react2 = require("@carbon/react");
 
 var _settings = require("../../../settings");
 
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+
+var _layout = require("@carbon/layout");
+
 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; }
@@ -30,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,
@@ -46,6 +49,8 @@ var rowSizeMap = {
 var defaultRowHeight = rowSizeMap.lg;
 
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var _gridRef$current, _gridRef$current2;
+
   var getTableBodyProps = datagridState.getTableBodyProps,
       rows = datagridState.rows,
       prepareRow = datagridState.prepareRow,
@@ -53,12 +58,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       innerListRef = datagridState.innerListRef,
       _datagridState$tableH = datagridState.tableHeight,
       tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+      virtualHeight = datagridState.virtualHeight,
       listRef = datagridState.listRef,
       rowSize = datagridState.rowSize,
       DatagridPagination = datagridState.DatagridPagination,
       page = datagridState.page,
       handleResize = datagridState.handleResize,
-      withOverflowRow = datagridState.withOverflowRow;
+      gridRef = datagridState.gridRef;
+
+  var syncScroll = function syncScroll(e) {
+    var virtualBody = e.target;
+    document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
+    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
+    spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
+  };
+
   (0, _react.useEffect)(function () {
     handleResize();
   }, [handleResize]);
@@ -69,10 +83,18 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }
 
   var visibleRows = DatagridPagination && page || rows;
-  return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    onScroll: onScroll
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__head-warp"),
+    style: {
+      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(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+    onScroll: function onScroll(e) {
+      return syncScroll(e);
+    }
   }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
-    height: tableHeight,
+    height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {
       return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
@@ -81,20 +103,21 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     onScroll: onScroll,
     innerRef: innerListRef,
     ref: listRef,
-    className: "".concat(blockClass, "__virtual-scrollbar")
+    className: "".concat(blockClass, "__virtual-scrollbar"),
+    style: {
+      width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
+    }
   }, function (_ref) {
     var index = _ref.index,
         style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        overflow: withOverflowRow ? 'visible' : 'hidden'
-      })
+      style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
       row: row
     })));
-  }));
+  })));
 };
 
 var _default = DatagridVirtualBody;

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

@@ -17,7 +17,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _reactDnd = require("react-dnd");
 
@@ -45,6 +45,8 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
+  var _cx;
+
   var id = _ref.id,
       index = _ref.index,
       listData = _ref.listData,
@@ -55,7 +57,9 @@ 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,
       positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
       _ref$grabbedLabel = _ref.grabbedLabel,
@@ -140,11 +144,13 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_iconsReact.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)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
+    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",
@@ -175,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
@@ -193,11 +199,13 @@ 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,
   onGrab: _propTypes.default.func.isRequired,
   positionLabel: _propTypes.default.string,
+  selected: _propTypes.default.bool,
   type: _propTypes.default.string.isRequired
 };
 var _default = DraggableElement;

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

@@ -9,80 +9,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _iconsReact = require("@carbon/icons-react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("@carbon/react");
 
 var React = _interopRequireWildcard(require("react"));
 
-var _keyBy = _interopRequireDefault(require("lodash/keyBy"));
-
 var _settings = require("../../../../../settings");
 
-var _common = require("./common");
-
 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; }
 
-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; }
-
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var Actions = function Actions(_ref) {
   var searchText = _ref.searchText,
-      columns = _ref.columns,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      setColumnsObject = _ref.setColumnsObject,
       setSearchText = _ref.setSearchText,
-      _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
-      findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
-      _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
-      resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa;
+      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions"),
-    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(_react.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "lg",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?
       setSearchText(e.target.value);
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--search")
-  }), /*#__PURE__*/React.createElement(_react.Button, {
-    onClick: function onClick() {
-      var reset = resetToOriginal(columns, originalColumnDefinitions);
-      setColumnsObject(reset);
-    },
-    size: "sm",
-    kind: "ghost",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(_iconsReact.Reset, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
-  }, resetToDefaultLabel));
-};
-
-var resetToOriginal = function resetToOriginal(columnDefinitions, originalColumnDefinitions) {
-  var keyedDefs = (0, _keyBy.default)(columnDefinitions, 'id');
-  return originalColumnDefinitions.map(function (colDef) {
-    return _objectSpread(_objectSpread({}, keyedDefs[colDef.id]), {}, {
-      isVisible: (0, _common.isColumnVisible)(colDef)
-    });
-  });
+    }
+  }));
 };
 
 Actions.propTypes = {

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

@@ -17,13 +17,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
 var _settings = require("../../../../../settings");
 
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
 
 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); }
 
@@ -33,14 +33,14 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var ButtonWrapper = function ButtonWrapper(_ref) {
   var _onClick = _ref.onClick,
-      setIsModalOpen = _ref.setIsModalOpen,
-      isModalOpen = _ref.isModalOpen,
+      setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+      isTearsheetOpen = _ref.isTearsheetOpen,
       _ref$iconTooltipLabel = _ref.iconTooltipLabel,
       iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(_iconsReact.Column, (0, _extends2.default)({
+      return /*#__PURE__*/React.createElement(_icons.Column, (0, _extends2.default)({
         size: 16
       }, props));
     },
@@ -50,7 +50,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
+      setIsTearsheetOpen(!isTearsheetOpen);
 
       if (typeof _onClick === 'function') {
         _onClick();
@@ -59,11 +59,14 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
   }));
 };
 
+ButtonWrapper.defaultProps = {
+  onClick: function onClick() {}
+};
 ButtonWrapper.propTypes = {
   iconTooltipLabel: _propTypes.default.string,
-  isModalOpen: _propTypes.default.bool.isRequired,
+  isTearsheetOpen: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func.isRequired,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
 var _default = ButtonWrapper;
 exports.default = _default;