@carbon/ibm-products 1.27.0 → 1.32.0

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

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

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

@@ -45,6 +45,8 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
+  var _cx;
+
   var id = _ref.id,
       index = _ref.index,
       listData = _ref.listData,
@@ -56,6 +58,7 @@ var DraggableElement = function DraggableElement(_ref) {
       onArrowKeyDown = _ref.onArrowKeyDown,
       isFocused = _ref.isFocused,
       moveElement = _ref.moveElement,
+      selected = _ref.selected,
       _ref$positionLabel = _ref.positionLabel,
       positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
       _ref$grabbedLabel = _ref.grabbedLabel,
@@ -142,7 +145,7 @@ var DraggableElement = function DraggableElement(_ref) {
     }, "".concat(blockClass, "__draggable-handleStyle"))
   }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
+    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -196,6 +199,7 @@ DraggableElement.propTypes = {
   onArrowKeyDown: _propTypes.default.func.isRequired,
   onGrab: _propTypes.default.func.isRequired,
   positionLabel: _propTypes.default.string,
+  selected: _propTypes.default.bool,
   type: _propTypes.default.string.isRequired
 };
 var _default = DraggableElement;

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

@@ -9,45 +9,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _iconsReact = require("@carbon/icons-react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
 var React = _interopRequireWildcard(require("react"));
 
-var _keyBy = _interopRequireDefault(require("lodash/keyBy"));
-
 var _settings = require("../../../../../settings");
 
-var _common = require("./common");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// @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.
+ */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var Actions = function Actions(_ref) {
   var searchText = _ref.searchText,
-      columns = _ref.columns,
-      originalColumnDefinitions = _ref.originalColumnDefinitions,
-      setColumnsObject = _ref.setColumnsObject,
       setSearchText = _ref.setSearchText,
-      _ref$findColumnPlaceh = _ref.findColumnPlaceholderLabel,
-      findColumnPlaceholderLabel = _ref$findColumnPlaceh === void 0 ? 'Find column' : _ref$findColumnPlaceh,
-      _ref$resetToDefaultLa = _ref.resetToDefaultLabel,
-      resetToDefaultLabel = _ref$resetToDefaultLa === void 0 ? 'Reset to default' : _ref$resetToDefaultLa;
+      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-modal--actions"),
-    "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
+    className: "".concat(blockClass, "__customize-columns-modal--actions")
   }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
@@ -56,27 +46,8 @@ var Actions = function Actions(_ref) {
     onChange: function onChange(e) {
       // TODO: is it performant?
       setSearchText(e.target.value);
-    },
-    "test-id": "".concat(blockClass, "__customize-columns-modal--search")
-  }), /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
-    onClick: function onClick() {
-      var reset = resetToOriginal(columns, originalColumnDefinitions);
-      setColumnsObject(reset);
-    },
-    size: "sm",
-    kind: "ghost",
-    renderIcon: _iconsReact.Reset16,
-    "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
-  }, resetToDefaultLabel));
-};
-
-var resetToOriginal = function resetToOriginal(columnDefinitions, originalColumnDefinitions) {
-  var keyedDefs = (0, _keyBy.default)(columnDefinitions, 'id');
-  return originalColumnDefinitions.map(function (colDef) {
-    return _objectSpread(_objectSpread({}, keyedDefs[colDef.id]), {}, {
-      isVisible: (0, _common.isColumnVisible)(colDef)
-    });
-  });
+    }
+  }));
 };
 
 Actions.propTypes = {

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/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,9 +29,7 @@ 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
 
@@ -59,36 +57,39 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
 };
 
 var Columns = function Columns(_ref) {
-  var filterString = _ref.filterString,
+  var _classNames;
+
+  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"),
@@ -107,16 +108,30 @@ var Columns = function Columns(_ref) {
         setFocusIndex(0);
       }
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__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)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), (0, _defineProperty2.default)(_classNames, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _classNames)),
+    selected: getVisibleColumnsCount() > 0
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+    checked: getVisibleColumnsCount() === columns.length,
+    empty: !!getVisibleColumnsCount() === 0,
+    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, {
+    return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
       key: colDef.id,
       index: i,
       listData: columns,
@@ -142,24 +157,31 @@ var Columns = function Columns(_ref) {
             });
           }
         }
-      }
-    }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
+      },
+      selected: (0, _common.isColumnVisible)(colDef)
+    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       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
+      title: colDef.Header.props.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox")
     }));
   }))));
 };
 
 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

@@ -44,20 +44,40 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
       columnDefinitions = _ref.columnDefinitions,
       originalColumnDefinitions = _ref.originalColumnDefinitions,
       _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize display' : _ref$customizeModalHe,
+      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
       _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)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      totalColumns = _useState4[0],
+      setTotalColumns = _useState4[1];
+
+  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;
   }) // only sort the hidden column to the end when modal reopen
@@ -75,14 +95,14 @@ 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);
@@ -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,11 +139,20 @@ 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();
+  (0, _react.useEffect)(function () {
+    setVisibleColumnsCount(getVisibleColumnsCount());
+    setTotalColumns(columnObjects.length);
+  }, [getVisibleColumnsCount, columnObjects.length]);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Modal, {
     className: "".concat(blockClass, "__customize-columns-modal"),
     open: isOpen,
-    modalHeading: customizeModalHeadingLabel,
+    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
     primaryButtonText: primaryButtonTextLabel,
     secondaryButtonText: secondaryButtonTextLabel,
     selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
@@ -141,32 +168,41 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     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 = {
+  assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
+  assistiveTextInstructionsLabel: _propTypes.default.string,
   columnDefinitions: _propTypes.default.array.isRequired,
   customizeModalHeadingLabel: _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,
+  selectAllLabel: _propTypes.default.string,
   setIsModalOpen: _propTypes.default.func.isRequired
 };
 var _default = CustomizeColumnsModal;

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

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _CustomizeColumnsModal = _interopRequireDefault(require("./CustomizeColumnsModal"));
 
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
+var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "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); }
 
@@ -31,10 +31,11 @@ var ModalWrapper = function ModalWrapper(_ref) {
       _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
       isModalOpen = _instance$customizeCo.isModalOpen,
       setIsModalOpen = _instance$customizeCo.setIsModalOpen,
+      labels = _instance$customizeCo.labels,
       rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
 
   if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/React.createElement(_CustomizeColumnsModal.default, (0, _extends2.default)({}, rest, labels, {
       isOpen: isModalOpen,
       setIsModalOpen: setIsModalOpen,
       columnDefinitions: instance.allColumns,

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEditButton = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _settings = require("../../../../../../settings");
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2022
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var InlineEditButton = function InlineEditButton(_ref) {
+  var _cx, _cx2;
+
+  var label = _ref.label,
+      Icon = _ref.renderIcon,
+      disabled = _ref.disabled,
+      LabelIcon = _ref.labelIcon,
+      placeholder = _ref.placeholder,
+      nonEditCell = _ref.nonEditCell,
+      isActiveCell = _ref.isActiveCell,
+      columnConfig = _ref.columnConfig,
+      totalInlineEditColumns = _ref.totalInlineEditColumns,
+      totalColumns = _ref.totalColumns,
+      type = _ref.type;
+  var inlineEditColsLessThanHalfOfTotal = totalInlineEditColumns < totalColumns / 2;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    tabIndex: isActiveCell ? 0 : -1,
+    "data-disabled": disabled || nonEditCell,
+    "aria-disabled": disabled || nonEditCell,
+    role: "button",
+    title: label
+  }, LabelIcon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__label-icon")
+  }, /*#__PURE__*/_react.default.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
+  }, label) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(blockClass, "__placeholder")
+  }, placeholder), !nonEditCell && Icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__inline-edit-button-icon")
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+};
+
+exports.InlineEditButton = InlineEditButton;
+InlineEditButton.propTypes = {
+  columnConfig: _propTypes.default.object,
+  disabled: _propTypes.default.bool,
+  isActiveCell: _propTypes.default.bool,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  labelIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  nonEditCell: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  totalColumns: _propTypes.default.number,
+  totalInlineEditColumns: _propTypes.default.number,
+  type: _propTypes.default.oneOf(['text', 'number', 'selection', 'date']),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+};

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineEditButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEditButton.InlineEditButton;
+  }
+});
+
+var _InlineEditButton = require("./InlineEditButton");