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

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
 
@@ -8,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-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 +18,7 @@ import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import DraggableElement from '../../DraggableElement';
 import { isColumnVisible } from './common';
+import classNames from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var getNextIndex = function getNextIndex(array, currentIndex, key) {
@@ -34,14 +36,16 @@ 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(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -88,7 +92,21 @@ var Columns = function Columns(_ref) {
   }, 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: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), _defineProperty(_classNames, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _classNames)),
+    selected: getVisibleColumnsCount() > 0
+  }, /*#__PURE__*/React.createElement(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, {
@@ -117,24 +135,31 @@ var Columns = function Columns(_ref) {
             });
           }
         }
-      }
+      },
+      selected: isColumnVisible(colDef)
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
       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
+      title: colDef.Header.props.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox")
     }));
   }))));
 };
 
 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/CustomizeColumnsModal.js

@@ -13,13 +13,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 // @flow
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Modal } from '@carbon/react';
 import { isColumnVisible } from './common';
 import Columns from './Columns';
 import Actions from './Actions';
 import { pkg } from '../../../../../settings';
+import { useCallback } from 'react';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
@@ -29,20 +30,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 = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      searchText = _useState2[0],
-      setSearchText = _useState2[1];
+      visibleColumnsCount = _useState2[0],
+      setVisibleColumnsCount = _useState2[1];
 
-  var _useState3 = useState(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
+  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;
   }) // only sort the hidden column to the end when modal reopen
@@ -60,14 +81,14 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
 
     return 0;
   })),
-      _useState4 = _slicedToArray(_useState3, 2),
-      columnObjects = _useState4[0],
-      _setColumnsObject = _useState4[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      columnObjects = _useState8[0],
+      setColumnObjects = _useState8[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isDirty = _useState6[0],
-      setIsDirty = _useState6[1];
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isDirty = _useState10[0],
+      setIsDirty = _useState10[1];
 
   var onRequestClose = function onRequestClose() {
     setIsModalOpen(false);
@@ -86,7 +107,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
         });
@@ -94,9 +115,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
 
       return definition;
     });
-
-    _setColumnsObject(changedDefinitions);
-
+    setColumnObjects(changedDefinitions);
     setDirty();
   };
 
@@ -106,11 +125,20 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     }
   };
 
+  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(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"),
@@ -126,32 +154,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.createElement(Columns, {
+    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.string,
+  assistiveTextInstructionsLabel: PropTypes.string,
   columnDefinitions: PropTypes.array.isRequired,
   customizeModalHeadingLabel: 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,
   setIsModalOpen: PropTypes.func.isRequired
 };
 export default CustomizeColumnsModal;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen"];
+var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
 // @flow
 
 /*
@@ -21,10 +21,11 @@ var ModalWrapper = function ModalWrapper(_ref) {
       _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
       isModalOpen = _instance$customizeCo.isModalOpen,
       setIsModalOpen = _instance$customizeCo.setIsModalOpen,
+      labels = _instance$customizeCo.labels,
       rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
 
   if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, labels, {
       isOpen: isModalOpen,
       setIsModalOpen: setIsModalOpen,
       columnDefinitions: instance.allColumns,

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

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/*
+ * 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.
+ */
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { pkg } from '../../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export 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.createElement("div", {
+    className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--edit-less-than-half-of-total-cols"), inlineEditColsLessThanHalfOfTotal), _defineProperty(_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.createElement("div", {
+    className: "".concat(blockClass, "__label-icon")
+  }, /*#__PURE__*/React.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React.createElement("span", {
+    className: cx("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), _defineProperty(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
+  }, label) : /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "__placeholder")
+  }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__inline-edit-button-icon")
+  }, /*#__PURE__*/React.createElement(Icon, null)));
+};
+InlineEditButton.propTypes = {
+  columnConfig: PropTypes.object,
+  disabled: PropTypes.bool,
+  isActiveCell: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  labelIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  nonEditCell: PropTypes.bool,
+  placeholder: PropTypes.string,
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  totalColumns: PropTypes.number,
+  totalInlineEditColumns: PropTypes.number,
+  type: PropTypes.oneOf(['text', 'number', 'selection', 'date']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};

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

@@ -0,0 +1 @@
+export { InlineEditButton } from './InlineEditButton';