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

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,19 +139,27 @@ 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(_react2.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"),
     primaryButtonDisabled: !isDirty,
     onRequestClose: onRequestClose,
     onRequestSubmit: onRequestSubmit,
-    size: "sm",
-    hasForm: true
+    size: "sm"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-instructions")
   }, instructionsLabel), /*#__PURE__*/_react.default.createElement(_Actions.default, {
@@ -141,32 +167,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");