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

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

@@ -1,26 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
-// @flow
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
 
-/*
- * 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.
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Column } from '@carbon/icons-react';
+import { Column } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(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 = _objectWithoutProperties(_ref, _excluded);
@@ -37,7 +35,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();
@@ -46,10 +44,13 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
   }));
 };
 
+ButtonWrapper.defaultProps = {
+  onClick: function onClick() {}
+};
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
-  isModalOpen: PropTypes.bool.isRequired,
+  isTearsheetOpen: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  setIsModalOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired
 };
 export default ButtonWrapper;

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

@@ -1,14 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-// @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.
  */
-import * as React from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -17,6 +16,7 @@ import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import DraggableElement from '../../DraggableElement';
 import { isColumnVisible } from './common';
+import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var getNextIndex = function getNextIndex(array, currentIndex, key) {
@@ -34,14 +34,14 @@ 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(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -76,21 +76,51 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaRegionText), /*#__PURE__*/React.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.createElement("div", {
+    id: "".concat(blockClass, "__customize-columns-select-all"),
+    className: cx("".concat(blockClass, "__customize-columns-select-all"), _defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
+    selected: getVisibleColumnsCount() > 0
+  }, /*#__PURE__*/React.createElement(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) {
+    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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
+      checked: 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.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
     return /*#__PURE__*/React.createElement(DraggableElement, {
       key: colDef.id,
       index: i,
@@ -98,18 +128,21 @@ var Columns = function Columns(_ref) {
       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({
@@ -117,24 +150,23 @@ var Columns = function Columns(_ref) {
             });
           }
         }
-      }
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
-      checked: 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: isColumnVisible(colDef)
+    }, listContents);
   }))));
 };
 
 Columns.propTypes = {
+  assistiveTextDisabledInstructionsLabel: PropTypes.string,
+  assistiveTextInstructionsLabel: PropTypes.string,
   columns: PropTypes.array.isRequired,
   disabledInstructionsLabel: PropTypes.string,
   filterString: PropTypes.string.isRequired,
+  getVisibleColumnsCount: PropTypes.func.isRequired,
   instructionsLabel: PropTypes.string,
   onSelectColumn: PropTypes.func.isRequired,
+  selectAllLabel: PropTypes.string,
+  setColumnStatus: PropTypes.func,
   setColumnsObject: PropTypes.func.isRequired
 };
 export default Columns;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -0,0 +1,193 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { isColumnVisible } from './common';
+import { TearsheetNarrow } from '../../../../Tearsheet';
+import Columns from './Columns';
+import Actions from './Actions';
+import { pkg } from '../../../../../settings';
+import { useCallback } from 'react';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
+  var isOpen = _ref.isOpen,
+      setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+      onSaveColumnPrefs = _ref.onSaveColumnPrefs,
+      columnDefinitions = _ref.columnDefinitions,
+      originalColumnDefinitions = _ref.originalColumnDefinitions,
+      _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 ? '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 = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      visibleColumnsCount = _useState2[0],
+      setVisibleColumnsCount = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      totalColumns = _useState4[0],
+      setTotalColumns = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchText = _useState6[0],
+      setSearchText = _useState6[1];
+
+  var _useState7 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    return !!colDef.Header.props && !colDef.isAction;
+  }) // only sort the hidden column to the end when modal reopen
+  .sort(function (defA, defB) {
+    var isVisibleA = isColumnVisible(defA);
+    var isVisibleB = isColumnVisible(defB);
+
+    if (isVisibleA && !isVisibleB) {
+      return -1;
+    }
+
+    if (!isVisibleA && isVisibleB) {
+      return 1;
+    }
+
+    return 0;
+  })),
+      _useState8 = _slicedToArray(_useState7, 2),
+      columnObjects = _useState8[0],
+      setColumnObjects = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isDirty = _useState10[0],
+      setIsDirty = _useState10[1];
+
+  var onRequestClose = function onRequestClose() {
+    setIsTearsheetOpen(false);
+  };
+
+  var onRequestSubmit = function onRequestSubmit() {
+    setIsTearsheetOpen(false);
+    var updatedColumns = columnObjects.map(function (colDef) {
+      return {
+        id: colDef.id,
+        isVisible: colDef.isVisible
+      };
+    });
+    onSaveColumnPrefs(updatedColumns);
+  };
+
+  var onCheckboxCheck = function onCheckboxCheck(col, value) {
+    var changedDefinitions = columnObjects.map(function (definition) {
+      if (Array.isArray(col) && col.indexOf(definition) != null || definition.id === col.id) {
+        return _objectSpread(_objectSpread({}, definition), {}, {
+          isVisible: value
+        });
+      }
+
+      return definition;
+    });
+    setColumnObjects(changedDefinitions);
+    setDirty();
+  };
+
+  var setDirty = function setDirty() {
+    if (!isDirty) {
+      setIsDirty(true);
+    }
+  };
+
+  var getVisibleColumnsCount = useCallback(function () {
+    return columnObjects.filter(function (col) {
+      return col.isVisible;
+    }).length;
+  }, [columnObjects]);
+  var string = searchText.trim().toLowerCase();
+  useEffect(function () {
+    setVisibleColumnsCount(getVisibleColumnsCount());
+    setTotalColumns(columnObjects.length);
+  }, [getVisibleColumnsCount, columnObjects.length]);
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
+    open: isOpen,
+    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.createElement(Actions, {
+    columns: columnObjects,
+    originalColumnDefinitions: originalColumnDefinitions,
+    searchText: searchText,
+    setColumnsObject: function setColumnsObject(cols) {
+      setColumnObjects(cols);
+      setDirty();
+    },
+    setSearchText: setSearchText,
+    findColumnPlaceholderLabel: findColumnPlaceholderLabel,
+    resetToDefaultLabel: resetToDefaultLabel
+  }), isOpen && /*#__PURE__*/React.createElement(Columns, {
+    assistiveTextInstructionsLabel: assistiveTextInstructionsLabel,
+    assistiveTextDisabledInstructionsLabel: assistiveTextDisabledInstructionsLabel,
+    getVisibleColumnsCount: getVisibleColumnsCount,
+    columns: columnObjects,
+    filterString: string,
+    onSelectColumn: onCheckboxCheck,
+    setColumnsObject: function setColumnsObject(cols) {
+      setColumnObjects(cols);
+      setDirty();
+    },
+    selectAllLabel: selectAllLabel
+  }));
+};
+
+CustomizeColumnsTearsheet.propTypes = {
+  assistiveTextDisabledInstructionsLabel: PropTypes.string,
+  assistiveTextInstructionsLabel: PropTypes.string,
+  columnDefinitions: PropTypes.array.isRequired,
+  customizeTearsheetHeadingLabel: PropTypes.string,
+  findColumnPlaceholderLabel: PropTypes.string,
+  instructionsLabel: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  onSaveColumnPrefs: PropTypes.func.isRequired,
+  originalColumnDefinitions: PropTypes.array.isRequired,
+  primaryButtonTextLabel: PropTypes.string,
+  resetToDefaultLabel: PropTypes.string,
+  secondaryButtonTextLabel: PropTypes.string,
+  selectAllLabel: PropTypes.string,
+  setIsTearsheetOpen: PropTypes.func.isRequired
+};
+export default CustomizeColumnsTearsheet;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
+
+/* 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.
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet';
+
+var TearsheetWrapper = function TearsheetWrapper(_ref) {
+  var instance = _ref.instance;
+
+  var _instance$customizeCo = instance.customizeColumnsProps,
+      _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
+      isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
+      setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
+      labels = _instance$customizeCo.labels,
+      rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
+
+  return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, 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;
+        }));
+      } 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);
+      }
+    }
+  }));
+};
+
+TearsheetWrapper.propTypes = {
+  instance: PropTypes.object.isRequired
+};
+export default TearsheetWrapper;

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

@@ -5,5 +5,5 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-export { default as CustomizeColumnsModalWrapper } from './ModalWrapper';
+export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper';
 export { default as ToggleButtonWrapper } from './ButtonWrapper';