@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.13

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,
@@ -162,7 +168,7 @@ var DatagridContent = function DatagridContent(_ref) {
   }, 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), CustomizeColumnsModal && /*#__PURE__*/_react.default.createElement(CustomizeColumnsModal, {
+  }, 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
   }));
 };
@@ -174,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,

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;

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js}

@@ -17,58 +17,53 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CustomizeColumnsModal = _interopRequireDefault(require("./CustomizeColumnsModal"));
+var _CustomizeColumnsTearsheet = _interopRequireDefault(require("./CustomizeColumnsTearsheet"));
 
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
+var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
 
 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 ModalWrapper = function ModalWrapper(_ref) {
+var TearsheetWrapper = function TearsheetWrapper(_ref) {
   var instance = _ref.instance;
   var _instance$customizeCo = instance.customizeColumnsProps,
       _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
-      isModalOpen = _instance$customizeCo.isModalOpen,
-      setIsModalOpen = _instance$customizeCo.setIsModalOpen,
+      isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
+      setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
       labels = _instance$customizeCo.labels,
       rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
-
-  if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, labels, {
-      isOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen,
-      columnDefinitions: instance.allColumns,
-      originalColumnDefinitions: instance.columns,
-      onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-        var hiddenIds = updatedColDefs.filter(function (colDef) {
-          return !colDef.isVisible;
-        }).map(function (colDef) {
+  return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
+    isOpen: isTearsheetOpen,
+    setIsTearsheetOpen: setIsTearsheetOpen,
+    columnDefinitions: instance.allColumns,
+    originalColumnDefinitions: instance.columns,
+    onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
+      var hiddenIds = updatedColDefs.filter(function (colDef) {
+        return !colDef.isVisible;
+      }).map(function (colDef) {
+        return colDef.id;
+      });
+      instance.setHiddenColumns(hiddenIds);
+
+      if (typeof instance.setColumnOrder === 'function') {
+        instance.setColumnOrder(updatedColDefs.map(function (colDef) {
           return colDef.id;
-        });
-        instance.setHiddenColumns(hiddenIds);
-
-        if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
-            return colDef.id;
-          }));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
-        }
-
-        if (typeof _onSaveColumnPrefs === 'function') {
-          _onSaveColumnPrefs(updatedColDefs);
-        }
+        }));
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
       }
-    }));
-  }
 
-  return null;
+      if (typeof _onSaveColumnPrefs === 'function') {
+        _onSaveColumnPrefs(updatedColDefs);
+      }
+    }
+  }));
 };
 
-ModalWrapper.propTypes = {
+TearsheetWrapper.propTypes = {
   instance: _propTypes.default.object.isRequired
 };
-var _default = ModalWrapper;
+var _default = TearsheetWrapper;
 exports.default = _default;

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

@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CustomizeColumnsModalWrapper", {
+Object.defineProperty(exports, "CustomizeColumnsTearsheetWrapper", {
   enumerable: true,
   get: function get() {
-    return _ModalWrapper.default;
+    return _TearsheetWrapper.default;
   }
 });
 Object.defineProperty(exports, "ToggleButtonWrapper", {
@@ -18,6 +18,6 @@ Object.defineProperty(exports, "ToggleButtonWrapper", {
   }
 });
 
-var _ModalWrapper = _interopRequireDefault(require("./ModalWrapper"));
+var _TearsheetWrapper = _interopRequireDefault(require("./TearsheetWrapper"));
 
 var _ButtonWrapper = _interopRequireDefault(require("./ButtonWrapper"));

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -444,20 +444,24 @@ var InlineEditCell = function InlineEditCell(_ref) {
   };
 
   var buildDate = function buildDate(value) {
+    var _config$inputProps2;
+
+    var dateFormat = config === null || config === void 0 ? void 0 : (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
+
     if (value instanceof Date) {
-      var _config$dateFormat = config.dateFormat,
-          dateFormat = _config$dateFormat === void 0 ? 'm/d/Y' : _config$dateFormat;
       var maskedFullYear = value.getFullYear();
       var maskedMonth = padTo2Digits(value.getMonth() + 1);
       var maskedDay = padTo2Digits(value.getDate());
 
-      if (dateFormat === 'm/d/Y' || dateFormat === 'm/d/y') {
+      if (dateFormat === 'm/d/Y' || value === 'm/d/y') {
         return [maskedMonth, maskedDay, maskedFullYear].join('/');
       }
 
-      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y') {
+      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y' || dateFormat === undefined) {
         return [maskedDay, maskedMonth, maskedFullYear].join('/');
       }
+    } else {
+      return value;
     }
 
     return null;

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -30,8 +30,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var useCustomizeColumns = function useCustomizeColumns(hooks) {
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isModalOpen = _React$useState2[0],
-      setIsModalOpen = _React$useState2[1];
+      isTearsheetOpen = _React$useState2[0],
+      setIsTearsheetOpen = _React$useState2[1];
 
   hooks.useInstance.push(function (instance) {
     var customizeColumnsProps = instance.customizeColumnsProps;
@@ -41,17 +41,17 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
 
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
-        isModalOpen: isModalOpen,
-        setIsModalOpen: setIsModalOpen
+        isTearsheetOpen: isTearsheetOpen,
+        setIsTearsheetOpen: setIsTearsheetOpen
       }),
       CustomizeColumnsButton: function CustomizeColumnsButton(props) {
         return /*#__PURE__*/React.createElement(_CustomizeColumns.ToggleButtonWrapper, (0, _extends2.default)({
           iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
-          isModalOpen: isModalOpen,
-          setIsModalOpen: setIsModalOpen
+          isTearsheetOpen: isTearsheetOpen,
+          setIsTearsheetOpen: setIsTearsheetOpen
         }, props));
       },
-      CustomizeColumnsModal: _CustomizeColumns.CustomizeColumnsModalWrapper
+      CustomizeColumnsTearsheet: _CustomizeColumns.CustomizeColumnsTearsheetWrapper
     });
   });
 };

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

@@ -121,6 +121,7 @@ var getInlineEditColumns = function getInlineEditColumns() {
         onChange: function onChange(newDateObj, cell) {
           console.log(newDateObj, cell);
         },
+        dateFormat: 'd/m/Y',
         // optionally pass props here to be passed through to Carbon's DatePickerInput component
         datePickerInputProps: {
           labelText: 'Change active since date'

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

@@ -190,7 +190,7 @@ var newPerson = function newPerson() {
       numbers: 0
     }),
     chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
-    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : '23/05/2020',
     bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
     passwordStrength: getPasswordStrength(),
     doc_link: renderDocLink()

package/lib/components/index.js

@@ -375,6 +375,12 @@ Object.defineProperty(exports, "useExpandedRow", {
     return _Datagrid.useExpandedRow;
   }
 });
+Object.defineProperty(exports, "useFiltering", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useFiltering;
+  }
+});
 Object.defineProperty(exports, "useInfiniteScroll", {
   enumerable: true,
   get: function get() {

package/lib/global/js/hooks/useCreateComponentFocus.js

@@ -1,13 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCreateComponentFocus = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("react");
 
-var _getFocusableElements = require("../utils/getFocusableElements");
+var _wait = _interopRequireDefault(require("../utils/wait"));
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -20,25 +26,50 @@ var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
       currentStep = _ref.currentStep,
       blockClass = _ref.blockClass,
-      onMount = _ref.onMount;
+      onMount = _ref.onMount,
+      firstFocusElement = _ref.firstFocusElement;
   (0, _react.useEffect)(function () {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
   (0, _react.useEffect)(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(elm) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return (0, _wait.default)(10);
+
+              case 2:
+                elm.focus();
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
-      var focusableStepElements = visibleStepInnerContent ? (0, _getFocusableElements.getFocusableElements)(visibleStepInnerContent) : [];
-
-      if (focusableStepElements && focusableStepElements.length) {
-        focusableStepElements[0].focus();
-      } else {
-        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
-        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
+
+        if (elm) {
+          awaitFocus(elm);
+        }
       }
     }
-  }, [currentStep, previousState, blockClass, onMount]);
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
 };
 
 exports.useCreateComponentFocus = useCreateComponentFocus;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.13",
   "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": "0ff8c3f5292f0c60f1944adfe0b428354e9d5af4"
+  "gitHead": "a562f82207cf4516c61e32e97a3f4c5c9b159d03"
 }

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

@@ -542,6 +542,11 @@
   justify-content: center;
 }
 
+.#{$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
+  flex: 0 0 auto;
+  margin-right: $spacing-03;
+}
+
 .#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
   width: 10px;
   height: 7px;