@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.12

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

@@ -27,6 +27,8 @@ var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
 
 var _DatagridContent = require("./DatagridContent");
 
+var _FilterProvider = require("./addons/Filtering/FilterProvider");
+
 var _excluded = ["datagridState"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
@@ -46,9 +48,12 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       isFetching = datagridState.isFetching,
       tableId = datagridState.tableId,
       leftPanel = datagridState.leftPanel,
-      className = datagridState.className;
+      className = datagridState.className,
+      filters = datagridState.state.filters;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
-  return /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_FilterProvider.FilterProvider, {
+    filters: filters
+  }, /*#__PURE__*/_react.default.createElement(_InlineEditContext.InlineEditProvider, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     id: tableId,
     ref: ref,
     className: (0, _classnames.default)(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
@@ -58,7 +63,7 @@ var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     datagridState: datagridState
   })), leftPanel === undefined && /*#__PURE__*/_react.default.createElement(_DatagridContent.DatagridContent, {
     datagridState: datagridState
-  })));
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 

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

@@ -45,6 +45,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 var TableContainer = _react2.DataTable.TableContainer,
     Table = _react2.DataTable.Table;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
@@ -64,7 +70,7 @@ var DatagridContent = function DatagridContent(_ref) {
       withVirtualScroll = datagridState.withVirtualScroll,
       DatagridPagination = datagridState.DatagridPagination,
       isFetching = datagridState.isFetching,
-      CustomizeColumnsModal = datagridState.CustomizeColumnsModal,
+      CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
       leftPanel = datagridState.leftPanel,
       fullHeightDatagrid = datagridState.fullHeightDatagrid,
       _datagridState$vertic = datagridState.verticalAlign,
@@ -76,7 +82,8 @@ var DatagridContent = function DatagridContent(_ref) {
       withInlineEdit = datagridState.withInlineEdit,
       tableId = datagridState.tableId,
       DatagridActions = datagridState.DatagridActions,
-      totalColumnsWidth = datagridState.totalColumnsWidth;
+      totalColumnsWidth = datagridState.totalColumnsWidth,
+      gridRef = datagridState.gridRef;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var gridActive = state.gridActive,
       editId = state.editId;
@@ -120,7 +127,7 @@ var DatagridContent = function DatagridContent(_ref) {
       onFocus: withInlineEdit ? function () {
         return (0, _handleGridFocus.handleGridFocus)(state, dispatch);
       } : null
-    }), /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+    }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: rows
     })));
   };
@@ -158,7 +165,10 @@ var DatagridContent = function DatagridContent(_ref) {
     className: "".concat(blockClass, "__datagridLeftPanel")
   }, leftPanel.panelContent), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
     ref: multiKeyTrackingRef
-  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
+  }, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };
@@ -170,7 +180,7 @@ DatagridContent.propTypes = {
     withVirtualScroll: _propTypes.default.bool,
     DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-    CustomizeColumnsModal: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     isFetching: _propTypes.default.bool,
     leftPanel: _propTypes.default.object,
     fullHeightDatagrid: _propTypes.default.bool,
@@ -183,6 +193,7 @@ DatagridContent.propTypes = {
     page: _propTypes.default.arrayOf(_propTypes.default.object),
     rows: _propTypes.default.arrayOf(_propTypes.default.object),
     tableId: _propTypes.default.string,
-    totalColumnsWidth: _propTypes.default.number
+    totalColumnsWidth: _propTypes.default.number,
+    gridRef: _propTypes.default.object
   })
 };

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

@@ -15,7 +15,7 @@ var _settings = require("../../../settings");
 
 var _react2 = require("@carbon/react");
 
-var _NoDataEmptyState = require("../../EmptyStates/NoDataEmptyState");
+var _EmptyStates = require("../../EmptyStates");
 
 /*
  * Licensed Materials - Property of IBM
@@ -35,16 +35,29 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       emptyStateTitle = datagridState.emptyStateTitle,
       emptyStateDescription = datagridState.emptyStateDescription,
       emptyStateSize = datagridState.emptyStateSize,
-      illustrationTheme = datagridState.illustrationTheme;
+      _datagridState$emptyS = datagridState.emptyStateType,
+      emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
+      illustrationTheme = datagridState.illustrationTheme,
+      emptyStateAction = datagridState.emptyStateAction,
+      emptyStateLink = datagridState.emptyStateLink;
   return /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/_react.default.createElement(TableRow, null, /*#__PURE__*/_react.default.createElement(TableCell, {
     colSpan: headers.length
-  }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
-    subtitle: emptyStateDescription
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
+  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
+    illustrationTheme: illustrationTheme,
+    size: emptyStateSize,
+    title: emptyStateTitle,
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
   }))));
 };
 

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@carbon/react");
 
@@ -27,16 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../../settings");
 
-var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
-
-var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
-
 var _excluded = ["children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _react2.DataTable.TableRow,
     TableCell = _react2.DataTable.TableCell;
@@ -55,12 +44,6 @@ var DatagridRow = function DatagridRow(datagridState) {
       rowSize = datagridState.rowSize,
       withNestedRows = datagridState.withNestedRows;
 
-  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
-      state = _useContext.state;
-
-  var activeCellId = state.activeCellId;
-  var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
-
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
         subRows = _ref.subRows;
@@ -77,7 +60,7 @@ var DatagridRow = function DatagridRow(datagridState) {
   };
 
   return /*#__PURE__*/_react.default.createElement(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), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
+    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,
     onMouseEnter: function onMouseEnter(event) {

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

@@ -27,6 +27,12 @@ var _settings = require("../../../settings");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _FilterSummary = require("../../FilterSummary");
+
+var _FilterProvider = require("./addons/Filtering/FilterProvider");
+
+var _constants = require("./addons/Filtering/constants");
+
 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; }
@@ -164,13 +170,28 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
 
   var DatagridActions = datagridState.DatagridActions,
       DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions;
+      batchActions = datagridState.batchActions,
+      state = datagridState.state;
+
+  var _useContext = (0, _react.useContext)(_FilterProvider.FilterContext),
+      filterTags = _useContext.filterTags,
+      EventEmitter = _useContext.EventEmitter;
+
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
+      }
+    });
+  };
+
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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))) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)), renderFilterSummary()) : 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; }
@@ -46,6 +50,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,
@@ -59,7 +65,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       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]);
@@ -70,8 +84,16 @@ 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(TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+    onScroll: function onScroll(e) {
+      return syncScroll(e);
+    }
   }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -82,20 +104,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/addons/CustomizeColumns/Actions.js

@@ -21,14 +21,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
@@ -37,11 +34,11 @@ var Actions = function Actions(_ref) {
       setSearchText = _ref.setSearchText,
       findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(_react.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
-    size: "sm",
+    size: "lg",
     labelText: findColumnPlaceholderLabel,
     onChange: function onChange(e) {
       // TODO: is it performant?

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

@@ -23,7 +23,7 @@ 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,8 +33,8 @@ 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);
@@ -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();
@@ -64,9 +64,9 @@ ButtonWrapper.defaultProps = {
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: _propTypes.default.string,
-  isModalOpen: _propTypes.default.bool.isRequired,
+  isTearsheetOpen: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func.isRequired,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
 var _default = ButtonWrapper;
 exports.default = _default;

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

@@ -31,14 +31,11 @@ var _common = require("./common");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-// @flow
-
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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");
 
@@ -57,8 +54,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
 };
 
 var Columns = function Columns(_ref) {
-  var _cx;
-
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
       filterString = _ref.filterString,
       columns = _ref.columns,
@@ -102,12 +97,7 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
@@ -116,7 +106,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
     id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _cx)),
+    className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
     className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -130,6 +120,28 @@ var Columns = function Columns(_ref) {
   })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+
+    var 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),
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: colDef.Header.props.title,
+      title: colDef.Header.props.title,
+      hideLabel: true
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
+
     return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
       key: colDef.id,
       index: i,
@@ -158,17 +170,7 @@ var Columns = function Columns(_ref) {
         }
       },
       selected: (0, _common.isColumnVisible)(colDef)
-    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
-      checked: (0, _common.isColumnVisible)(colDef),
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
-        return onSelectColumn(colDef, checked);
-      },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title
-    }));
+    }, listContents);
   }))));
 };
 

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js}

@@ -17,10 +17,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = require("@carbon/react");
-
 var _common = require("./common");
 
+var _Tearsheet = require("../../../../Tearsheet");
+
 var _Columns = _interopRequireDefault(require("./Columns"));
 
 var _Actions = _interopRequireDefault(require("./Actions"));
@@ -37,14 +37,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
+var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   var isOpen = _ref.isOpen,
-      setIsModalOpen = _ref.setIsModalOpen,
+      setIsTearsheetOpen = _ref.setIsTearsheetOpen,
       onSaveColumnPrefs = _ref.onSaveColumnPrefs,
       columnDefinitions = _ref.columnDefinitions,
       originalColumnDefinitions = _ref.originalColumnDefinitions,
-      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
+      _ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
+      customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
       _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
       primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
       _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
@@ -105,11 +105,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
       setIsDirty = _useState10[1];
 
   var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
   };
 
   var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
     var updatedColumns = columnObjects.map(function (colDef) {
       return {
         id: colDef.id,
@@ -149,20 +149,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     setVisibleColumnsCount(getVisibleColumnsCount());
     setTotalColumns(columnObjects.length);
   }, [getVisibleColumnsCount, columnObjects.length]);
-  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
+  return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,
-    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
+    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    description: instructionsLabel,
+    actions: [{
+      kind: 'secondary',
+      label: secondaryButtonTextLabel,
+      onClick: onRequestClose
+    }, {
+      kind: 'primary',
+      label: primaryButtonTextLabel,
+      onClick: onRequestSubmit,
+      disabled: !isDirty
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_Actions.default, {
     columns: columnObjects,
     originalColumnDefinitions: originalColumnDefinitions,
     searchText: searchText,
@@ -188,11 +190,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
   }));
 };
 
-CustomizeColumnsModal.propTypes = {
+CustomizeColumnsTearsheet.propTypes = {
   assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
   assistiveTextInstructionsLabel: _propTypes.default.string,
   columnDefinitions: _propTypes.default.array.isRequired,
-  customizeModalHeadingLabel: _propTypes.default.string,
+  customizeTearsheetHeadingLabel: _propTypes.default.string,
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
@@ -202,7 +204,7 @@ CustomizeColumnsModal.propTypes = {
   resetToDefaultLabel: _propTypes.default.string,
   secondaryButtonTextLabel: _propTypes.default.string,
   selectAllLabel: _propTypes.default.string,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  setIsTearsheetOpen: _propTypes.default.func.isRequired
 };
-var _default = CustomizeColumnsModal;
+var _default = CustomizeColumnsTearsheet;
 exports.default = _default;