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

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

@@ -2,16 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,18 +29,13 @@ var _DraggableElement = _interopRequireDefault(require("../../DraggableElement")
 
 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; }
+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");
 
@@ -59,36 +54,37 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
 };
 
 var Columns = function Columns(_ref) {
-  var filterString = _ref.filterString,
+  var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
+      filterString = _ref.filterString,
       columns = _ref.columns,
       setColumnsObject = _ref.setColumnsObject,
       onSelectColumn = _ref.onSelectColumn,
-      _ref$instructionsLabe = _ref.instructionsLabel,
-      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$instructionsLabe,
-      _ref$disabledInstruct = _ref.disabledInstructionsLabel,
-      disabledInstructionsLabel = _ref$disabledInstruct === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$disabledInstruct;
+      assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
+      assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
+      selectAllLabel = _ref.selectAllLabel;
 
-  var _React$useState = React.useState(''),
+  var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       ariaRegionText = _React$useState2[0],
       setAriaRegionText = _React$useState2[1];
 
-  var _React$useState3 = React.useState(-1),
+  var _React$useState3 = _react.default.useState(-1),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
       focusIndex = _React$useState4[0],
       setFocusIndex = _React$useState4[1];
 
-  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
+  var moveElement = _react.default.useCallback(function (dragIndex, hoverIndex) {
     var dragCard = columns[dragIndex];
     setColumnsObject((0, _immutabilityHelper.default)(columns, {
       $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
     }));
   }, [columns, setColumnsObject]);
-  return /*#__PURE__*/React.createElement("div", {
+
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list")
-  }, /*#__PURE__*/React.createElement(_reactDnd.DndProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
-  }, /*#__PURE__*/React.createElement("ol", {
+  }, /*#__PURE__*/_react.default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
@@ -101,40 +97,75 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
-  }, /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, ariaRegionText), /*#__PURE__*/React.createElement("span", {
+  }, ariaRegionText), /*#__PURE__*/_react.default.createElement("span", {
     id: "".concat(blockClass, "__customize-columns--instructions"),
     className: "".concat(blockClass, "__shared-ui--assistive-text")
-  }, filterString.length === 0 ? instructionsLabel : disabledInstructionsLabel), columns.filter(function (colDef) {
+  }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
+    id: "".concat(blockClass, "__customize-columns-select-all"),
+    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"),
+    checked: getVisibleColumnsCount() === columns.length,
+    indeterminate: getVisibleColumnsCount() < columns.length && getVisibleColumnsCount() > 0,
+    onChange: function onChange() {
+      onSelectColumn(columns, getVisibleColumnsCount() !== columns.length);
+    },
+    id: "".concat(blockClass, "__customization-column-select-all"),
+    labelText: selectAllLabel
+  })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
-    return /*#__PURE__*/React.createElement(_DraggableElement.default, {
+    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 isFrozenColumn = !!colDef.sticky;
+
+    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+      className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
+      checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      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,
       listData: columns,
       setListData: setColumnsObject,
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
-      disabled: filterString.length > 0,
+      disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colDef.Header.props.title,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
+      isSticky: isFrozenColumn,
       moveElement: moveElement,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
+          var _columns$nextIndex;
+
           var nextIndex = getNextIndex(columns, currentIndex, e.key);
           e.preventDefault();
           e.stopPropagation();
 
-          if (nextIndex >= 0) {
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
             moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({
@@ -142,24 +173,23 @@ var Columns = function Columns(_ref) {
             });
           }
         }
-      }
-    }, /*#__PURE__*/React.createElement(_react2.Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
-      checked: (0, _common.isColumnVisible)(colDef),
-      onChange: onSelectColumn.bind(null, colDef),
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title
-    }));
+      },
+      selected: (0, _common.isColumnVisible)(colDef)
+    }, listContents);
   }))));
 };
 
 Columns.propTypes = {
+  assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
+  assistiveTextInstructionsLabel: _propTypes.default.string,
   columns: _propTypes.default.array.isRequired,
   disabledInstructionsLabel: _propTypes.default.string,
   filterString: _propTypes.default.string.isRequired,
+  getVisibleColumnsCount: _propTypes.default.func.isRequired,
   instructionsLabel: _propTypes.default.string,
   onSelectColumn: _propTypes.default.func.isRequired,
+  selectAllLabel: _propTypes.default.string,
+  setColumnStatus: _propTypes.default.func,
   setColumnsObject: _propTypes.default.func.isRequired
 };
 var _default = Columns;

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,29 +37,49 @@ 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 display' : _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,
       secondaryButtonTextLabel = _ref$secondaryButtonT === void 0 ? 'Cancel' : _ref$secondaryButtonT,
       _ref$instructionsLabe = _ref.instructionsLabel,
-      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Deselect columns to hide them. Click and drag the white box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe;
+      instructionsLabel = _ref$instructionsLabe === void 0 ? 'Select columns to display them. Click and drag the box to reorder the columns. These specifications will be saved and persist if you leave and return to the data table.' : _ref$instructionsLabe,
+      _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,
+      _ref$assistiveTextIns = _ref.assistiveTextInstructionsLabel,
+      assistiveTextInstructionsLabel = _ref$assistiveTextIns === void 0 ? 'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.' : _ref$assistiveTextIns,
+      _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
+      assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
+      _ref$selectAllLabel = _ref.selectAllLabel,
+      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      searchText = _useState2[0],
-      setSearchText = _useState2[1];
+      visibleColumnsCount = _useState2[0],
+      setVisibleColumnsCount = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      totalColumns = _useState4[0],
+      setTotalColumns = _useState4[1];
 
-  var _useState3 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      searchText = _useState6[0],
+      setSearchText = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    return !!colDef.Header.props;
+    return !!colDef.Header.props && !colDef.isAction;
   }) // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = (0, _common.isColumnVisible)(defA);
@@ -75,21 +95,21 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
 
     return 0;
   })),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      columnObjects = _useState4[0],
-      _setColumnsObject = _useState4[1];
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      columnObjects = _useState8[0],
+      setColumnObjects = _useState8[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isDirty = _useState6[0],
-      setIsDirty = _useState6[1];
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isDirty = _useState10[0],
+      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,
@@ -101,7 +121,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
 
   var onCheckboxCheck = function onCheckboxCheck(col, value) {
     var changedDefinitions = columnObjects.map(function (definition) {
-      if (definition.id === col.id) {
+      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
         return _objectSpread(_objectSpread({}, definition), {}, {
           isVisible: value
         });
@@ -109,9 +129,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
 
       return definition;
     });
-
-    _setColumnsObject(changedDefinitions);
-
+    setColumnObjects(changedDefinitions);
     setDirty();
   };
 
@@ -121,53 +139,72 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     }
   };
 
+  var getVisibleColumnsCount = (0, _react.useCallback)(function () {
+    return columnObjects.filter(function (col) {
+      return col.isVisible;
+    }).length;
+  }, [columnObjects]);
   var string = searchText.trim().toLowerCase();
-  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
+  (0, _react.useEffect)(function () {
+    setVisibleColumnsCount(getVisibleColumnsCount());
+    setTotalColumns(columnObjects.length);
+  }, [getVisibleColumnsCount, columnObjects.length]);
+  return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,
-    modalHeading: customizeModalHeadingLabel,
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
-  }, /*#__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,
     setColumnsObject: function setColumnsObject(cols) {
-      _setColumnsObject(cols);
-
+      setColumnObjects(cols);
       setDirty();
     },
-    setSearchText: setSearchText
+    setSearchText: setSearchText,
+    findColumnPlaceholderLabel: findColumnPlaceholderLabel,
+    resetToDefaultLabel: resetToDefaultLabel
   }), isOpen && /*#__PURE__*/_react.default.createElement(_Columns.default, {
+    assistiveTextInstructionsLabel: assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel: assistiveTextDisabledInstructionsLabel,
+    getVisibleColumnsCount: getVisibleColumnsCount,
     columns: columnObjects,
     filterString: string,
     onSelectColumn: onCheckboxCheck,
     setColumnsObject: function setColumnsObject(cols) {
-      _setColumnsObject(cols);
-
+      setColumnObjects(cols);
       setDirty();
-    }
+    },
+    selectAllLabel: selectAllLabel
   }));
 };
 
-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,
   onSaveColumnPrefs: _propTypes.default.func.isRequired,
   originalColumnDefinitions: _propTypes.default.array.isRequired,
   primaryButtonTextLabel: _propTypes.default.string,
+  resetToDefaultLabel: _propTypes.default.string,
   secondaryButtonTextLabel: _propTypes.default.string,
-  setIsModalOpen: _propTypes.default.func.isRequired
+  selectAllLabel: _propTypes.default.string,
+  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,57 +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"];
+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, {
-      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"));