@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

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

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../../../node_modules/prop-types/index.js');
+var index = require('../../../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var update = require('immutability-helper');
 var settings = require('../../../../../settings.js');
-var index = require('../../../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var DraggableItemsList = require('./DraggableItemsList.js');
 var uuidv4 = require('../../../../../global/js/utils/uuidv4.js');
 
@@ -23,6 +23,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var update__default = /*#__PURE__*/_interopDefaultLegacy(update);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var Columns = function Columns(_ref) {
@@ -66,7 +67,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React__default["default"].createElement("div", {
     id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: index["default"]("".concat(blockClass, "__customize-columns-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
+    className: cx__default["default"]("".concat(blockClass, "__customize-columns-select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, {
     className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -87,17 +88,17 @@ var Columns = function Columns(_ref) {
   })));
 };
 Columns.propTypes = {
-  assistiveTextDisabledInstructionsLabel: index$1["default"].string,
-  assistiveTextInstructionsLabel: index$1["default"].string,
-  columns: index$1["default"].array.isRequired,
-  disabledInstructionsLabel: index$1["default"].string,
-  filterString: index$1["default"].string.isRequired,
-  getVisibleColumnsCount: index$1["default"].func.isRequired,
-  instructionsLabel: index$1["default"].string,
-  onSelectColumn: index$1["default"].func.isRequired,
-  selectAllLabel: index$1["default"].string,
-  setColumnStatus: index$1["default"].func,
-  setColumnsObject: index$1["default"].func.isRequired
+  assistiveTextDisabledInstructionsLabel: index["default"].string,
+  assistiveTextInstructionsLabel: index["default"].string,
+  columns: index["default"].array.isRequired,
+  disabledInstructionsLabel: index["default"].string,
+  filterString: index["default"].string.isRequired,
+  getVisibleColumnsCount: index["default"].func.isRequired,
+  instructionsLabel: index["default"].string,
+  onSelectColumn: index["default"].func.isRequired,
+  selectAllLabel: index["default"].string,
+  setColumnStatus: index["default"].func,
+  setColumnsObject: index["default"].func.isRequired
 };
 var Columns$1 = Columns;
 

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
-var index = require('../../../../../node_modules/classnames/index.js');
-var index$1 = require('../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../../../../node_modules/prop-types/index.js');
 var React = require('react');
 var settings = require('../../../../../settings.js');
 var constants = require('./constants.js');
@@ -27,6 +27,7 @@ var ActionSet = require('../../../../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _Filter;
@@ -225,17 +226,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
     kind: "ghost",
     align: "bottom",
     onClick: open ? closeFlyout : openFlyout,
-    className: index["default"]("".concat(componentClass, "__trigger"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
+    className: cx__default["default"]("".concat(componentClass, "__trigger"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, _Filter || (_Filter = /*#__PURE__*/React__default["default"].createElement(icons.Filter, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](componentClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
+    className: cx__default["default"](componentClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     ref: flyoutInnerRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(componentClass, "__inner-container")
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(componentClass, "__title")
   }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(componentClass, "__filters"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__stacked"), stackedLayout)),
+    className: cx__default["default"]("".concat(componentClass, "__filters"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__stacked"), stackedLayout)),
     ref: flyoutFiltersContainerRef
   }, renderFilters())), renderActionSet()));
 };
@@ -243,63 +244,63 @@ FilterFlyout.propTypes = {
   /**
    * All data rows in the table
    */
-  data: index$1["default"].array.isRequired,
+  data: index["default"].array.isRequired,
   /**
    * Array of filters to render
    */
-  filters: index$1["default"].arrayOf(index$1["default"].shape({
-    type: index$1["default"].string.isRequired,
-    column: index$1["default"].string.isRequired,
-    props: index$1["default"].object.isRequired
+  filters: index["default"].arrayOf(index["default"].shape({
+    type: index["default"].string.isRequired,
+    column: index["default"].string.isRequired,
+    props: index["default"].object.isRequired
   })).isRequired,
   /**
    * Icon description for the filter flyout button
    */
-  flyoutIconDescription: index$1["default"].string,
+  flyoutIconDescription: index["default"].string,
   /**
    * Callback when the apply button is clicked
    */
-  onApply: index$1["default"].func,
+  onApply: index["default"].func,
   /**
    * Callback when the cancel button is clicked
    */
-  onCancel: index$1["default"].func,
+  onCancel: index["default"].func,
   /**
    * Callback when the flyout closes
    */
-  onFlyoutClose: index$1["default"].func,
+  onFlyoutClose: index["default"].func,
   /**
    * Callback when the flyout opens
    */
-  onFlyoutOpen: index$1["default"].func,
+  onFlyoutOpen: index["default"].func,
   /**
    * Label text of the primary action in the flyout
    */
-  primaryActionLabel: index$1["default"].string,
+  primaryActionLabel: index["default"].string,
   /**
    * Filters from react table's state
    */
-  reactTableFiltersState: index$1["default"].arrayOf(index$1["default"].shape({
-    id: index$1["default"].string.isRequired,
-    type: index$1["default"].string.isRequired,
-    value: index$1["default"].any.isRequired
+  reactTableFiltersState: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string.isRequired,
+    type: index["default"].string.isRequired,
+    value: index["default"].any.isRequired
   })),
   /**
    * Label text of the secondary action in the flyout
    */
-  secondaryActionLabel: index$1["default"].string,
+  secondaryActionLabel: index["default"].string,
   /**
    * Function that sets all the filters, this comes from the datagridState
    */
-  setAllFilters: index$1["default"].func.isRequired,
+  setAllFilters: index["default"].func.isRequired,
   /**
    * Title of the filter flyout
    */
-  title: index$1["default"].string,
+  title: index["default"].string,
   /**
    * The update method used to apply the filters
    */
-  updateMethod: index$1["default"].oneOf([constants.BATCH, constants.INSTANT]).isRequired
+  updateMethod: index["default"].oneOf([constants.BATCH, constants.INSTANT]).isRequired
 };
 var FilterFlyout$1 = FilterFlyout;
 

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -16,8 +16,8 @@ var React = require('react');
 var variants = require('./motion/variants.js');
 var icons = require('@carbon/react/icons');
 var FilterProvider = require('./FilterProvider.js');
-var index$1 = require('../../../../../node_modules/prop-types/index.js');
-var index = require('../../../../../node_modules/classnames/index.js');
+var index = require('../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
 var framerMotion = require('framer-motion');
 var settings = require('../../../../../settings.js');
 var layout = require('@carbon/layout');
@@ -29,6 +29,7 @@ var useSubscribeToEventEmitter = require('./hooks/useSubscribeToEventEmitter.js'
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-panel");
@@ -199,7 +200,7 @@ var FilterPanel = function FilterPanel(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
     ref: filterPanelRef,
-    className: index["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
+    className: cx__default["default"](componentClass, "".concat(componentClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     custom: shouldReduceMotion,
@@ -209,7 +210,7 @@ var FilterPanel = function FilterPanel(_ref) {
     variants: variants.innerContainerVariants
   }, /*#__PURE__*/React__default["default"].createElement("header", {
     ref: filterHeadingRef,
-    className: index["default"]("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
+    className: cx__default["default"]("".concat(componentClass, "__heading"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(componentClass, "__heading--with-divider"), showDividerLine))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(componentClass, "__title")
   }, title), /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -265,32 +266,32 @@ var FilterPanel = function FilterPanel(_ref) {
   })), renderActionSet()));
 };
 FilterPanel.propTypes = {
-  autoHideFilters: index$1["default"].bool,
-  closeIconDescription: index$1["default"].string,
-  filterPanelMinHeight: index$1["default"].number,
-  filterSections: index$1["default"].array,
-  isFetching: index$1["default"].bool,
-  onApply: index$1["default"].func,
-  onCancel: index$1["default"].func,
-  onPanelClose: index$1["default"].func,
-  onPanelOpen: index$1["default"].func,
-  open: index$1["default"].bool,
-  primaryActionLabel: index$1["default"].string,
+  autoHideFilters: index["default"].bool,
+  closeIconDescription: index["default"].string,
+  filterPanelMinHeight: index["default"].number,
+  filterSections: index["default"].array,
+  isFetching: index["default"].bool,
+  onApply: index["default"].func,
+  onCancel: index["default"].func,
+  onPanelClose: index["default"].func,
+  onPanelOpen: index["default"].func,
+  open: index["default"].bool,
+  primaryActionLabel: index["default"].string,
   /**
    * Filters from react table's state
    */
-  reactTableFiltersState: index$1["default"].arrayOf(index$1["default"].shape({
-    id: index$1["default"].string.isRequired,
-    type: index$1["default"].string.isRequired,
-    value: index$1["default"].any.isRequired
+  reactTableFiltersState: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string.isRequired,
+    type: index["default"].string.isRequired,
+    value: index["default"].any.isRequired
   })),
-  searchLabelText: index$1["default"].string,
-  searchPlaceholder: index$1["default"].string,
-  secondaryActionLabel: index$1["default"].string,
-  setAllFilters: index$1["default"].func.isRequired,
-  showFilterSearch: index$1["default"].bool,
-  title: index$1["default"].string,
-  updateMethod: index$1["default"].oneOf([constants.BATCH, constants.INSTANT])
+  searchLabelText: index["default"].string,
+  searchPlaceholder: index["default"].string,
+  secondaryActionLabel: index["default"].string,
+  setAllFilters: index["default"].func.isRequired,
+  showFilterSearch: index["default"].bool,
+  title: index["default"].string,
+  updateMethod: index["default"].oneOf([constants.BATCH, constants.INSTANT])
 };
 var FilterPanel$1 = FilterPanel;
 

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js

@@ -41,7 +41,7 @@ var removeFilterItem = function removeFilterItem(state, index) {
   return state.splice(index, 1);
 };
 var updateFilterState = function updateFilterState(state, type, value) {
-  if (type === constants.CHECKBOX) {
+  if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
     return;
   }
   if (type === constants.DATE) {
@@ -64,7 +64,7 @@ var clearSingleFilter = function clearSingleFilter(_ref, setAllFilters, state) {
       var filterValues = f.value;
       var filterType = f.type;
       updateFilterState(tempState, filterType, value);
-      if (filterType === constants.CHECKBOX) {
+      if (filterType === constants.CHECKBOX || filterType === constants.MULTISELECT) {
         /**
           When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
           This checks if all the checkboxes are selected = false and removes it from the array
@@ -130,15 +130,15 @@ var prepareFiltersForTags = function prepareFiltersForTags(filters, renderDateLa
         key: id,
         value: (_renderDateLabel = renderDateLabel === null || renderDateLabel === void 0 ? void 0 : renderDateLabel(startDate, endDate)) !== null && _renderDateLabel !== void 0 ? _renderDateLabel : formatDateRange(startDate, endDate)
       }, sharedFilterProps));
-    } else if (type === constants.CHECKBOX) {
-      value.forEach(function (checkbox) {
-        if (checkbox.selected) {
+    } else if (type === constants.CHECKBOX || type === constants.MULTISELECT) {
+      value.forEach(function (option) {
+        if (option.selected) {
           tags.push(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
             key: id,
-            value: checkbox.value
+            value: option.value
           }, sharedFilterProps), {}, {
             onClose: function onClose() {
-              return handleSingleFilterRemoval(id, checkbox.value);
+              return handleSingleFilterRemoval(id, option.value);
             }
           }));
         }

package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts

@@ -16,6 +16,7 @@ export const NUMBER: "number";
 export const CHECKBOX: "checkbox";
 export const RADIO: "radio";
 export const DROPDOWN: "dropdown";
+export const MULTISELECT: "multiSelect";
 /** Constants for event emitters */
 export const CLEAR_FILTERS: "clearFilters";
 export const CLEAR_SINGLE_FILTER: "clearSingleFilter";

package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js

@@ -23,6 +23,7 @@ var NUMBER = 'number';
 var CHECKBOX = 'checkbox';
 var RADIO = 'radio';
 var DROPDOWN = 'dropdown';
+var MULTISELECT = 'multiSelect';
 
 /** Constants for event emitters */
 var CLEAR_FILTERS = 'clearFilters';
@@ -44,6 +45,7 @@ exports.DATE = DATE;
 exports.DROPDOWN = DROPDOWN;
 exports.FLYOUT = FLYOUT;
 exports.INSTANT = INSTANT;
+exports.MULTISELECT = MULTISELECT;
 exports.NUMBER = NUMBER;
 exports.PANEL = PANEL;
 exports.PANEL_WIDTH = PANEL_WIDTH;

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -123,7 +123,7 @@ var useFilters = function useFilters(_ref) {
       var id = _ref3.id;
       return id === column;
     });
-    var clearCheckbox = type === constants.CHECKBOX && filterCopy[index].value.every(function (_ref4) {
+    var clearCheckbox = (type === constants.CHECKBOX || type === constants.MULTISELECT) && filterCopy[index].value.every(function (_ref4) {
       var selected = _ref4.selected;
       return selected === false;
     });
@@ -295,6 +295,70 @@ var useFilters = function useFilters(_ref) {
           }
         }));
         break;
+      case constants.MULTISELECT:
+        {
+          var _filtersState$column5;
+          var isStringArray = components.MultiSelect.items.length && typeof components.MultiSelect.items[0] === 'string';
+          var selectedFilters = (_filtersState$column5 = filtersState[column]) === null || _filtersState$column5 === void 0 ? void 0 : _filtersState$column5.value.filter(function (i) {
+            return i.selected;
+          });
+          var filteredItems = components.MultiSelect.items.map(function (item) {
+            if (selectedFilters.filter(function (a) {
+              return isStringArray ? a.id === item : a.id === item.id;
+            }).length) {
+              return item;
+            }
+            return null;
+          }).filter(Boolean);
+          filter = /*#__PURE__*/React__default["default"].createElement(react.MultiSelect, _rollupPluginBabelHelpers["extends"]({}, components.MultiSelect, {
+            selectedItems: filteredItems,
+            onChange: function onChange(_ref9) {
+              var _components$MultiSele, _components$MultiSele2;
+              var selectedItems = _ref9.selectedItems;
+              var allOptions = filtersState[column].value;
+              // Find selected items from list of options
+              var foundItems = selectedItems.map(function (item) {
+                if (allOptions.filter(function (option) {
+                  return isStringArray ? option.id === item : option.id === item.id;
+                })) {
+                  return allOptions.filter(function (option) {
+                    return isStringArray ? option.id === item : option.id === item.id;
+                  })[0];
+                }
+                return null;
+              }).filter(Boolean);
+
+              // Change selected state for those items that have been selected
+              allOptions.map(function (a) {
+                return a.selected = false;
+              });
+              foundItems.map(function (item) {
+                var foundOriginalItem = allOptions.filter(function (a) {
+                  return isStringArray ? a === item : a.id === item.id;
+                });
+                if (foundOriginalItem && foundOriginalItem.length) {
+                  foundOriginalItem[0].selected = true;
+                }
+              });
+              if (!selectedItems.length) {
+                allOptions.map(function (a) {
+                  return a.selected = false;
+                });
+              }
+              setFiltersState(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, filtersState), {}, _rollupPluginBabelHelpers.defineProperty({}, column, {
+                value: allOptions,
+                type: type
+              })));
+              applyFilters({
+                column: column,
+                value: _rollupPluginBabelHelpers.toConsumableArray(filtersState[column].value),
+                type: type
+              });
+              (_components$MultiSele = components.MultiSelect) === null || _components$MultiSele === void 0 || (_components$MultiSele2 = _components$MultiSele.onChange) === null || _components$MultiSele2 === void 0 || _components$MultiSele2.call(_components$MultiSele, selectedItems);
+            }
+          }));
+          break;
+        }
     }
     if (isPanel) {
       return /*#__PURE__*/React__default["default"].createElement(react.Layer, {

package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js

@@ -67,6 +67,17 @@ var getInitialStateFromFilters = function getInitialStateFromFilters(filters, va
         value: '',
         type: type
       };
+    } else if (type === constants.MULTISELECT) {
+      initialFilterState[column] = {
+        value: props.MultiSelect.items.map(function (item) {
+          return {
+            id: typeof item === 'string' ? item : item.id,
+            value: typeof item === 'string' ? item : item.text,
+            selected: false
+          };
+        }),
+        type: type
+      };
     }
   };
   if (variation === constants.FLYOUT) {

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

@@ -11,13 +11,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../../../../../node_modules/classnames/index.js');
-var index$1 = require('../../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var index = require('../../../../../../node_modules/prop-types/index.js');
 var settings = require('../../../../../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var InlineEditButton = function InlineEditButton(_ref) {
@@ -31,7 +32,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
     columnConfig = _ref.columnConfig,
     type = _ref.type;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
+    className: cx__default["default"]("".concat(blockClass, "__inline-edit-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -40,7 +41,7 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React__default["default"].createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: index["default"]("".concat(blockClass, "__inline-edit-button-label"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
+    className: cx__default["default"]("".concat(blockClass, "__inline-edit-button-label"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
   }, label) : /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -48,16 +49,16 @@ var InlineEditButton = function InlineEditButton(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Icon, null)));
 };
 InlineEditButton.propTypes = {
-  columnConfig: index$1["default"].object,
-  disabled: index$1["default"].bool,
-  isActiveCell: index$1["default"].bool,
-  label: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number]),
-  labelIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  nonEditCell: index$1["default"].bool,
-  placeholder: index$1["default"].string,
-  renderIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-  type: index$1["default"].oneOf(['text', 'number', 'selection', 'date']),
-  value: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].node])
+  columnConfig: index["default"].object,
+  disabled: index["default"].bool,
+  isActiveCell: index["default"].bool,
+  label: index["default"].oneOfType([index["default"].string, index["default"].number]),
+  labelIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  nonEditCell: index["default"].bool,
+  placeholder: index["default"].string,
+  renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  value: index["default"].oneOfType([index["default"].string, index["default"].node])
 };
 
 exports.InlineEditButton = InlineEditButton;

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

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index$1 = require('../../../../../../node_modules/prop-types/index.js');
+var index = require('../../../../../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var settings = require('../../../../../../settings.js');
-var index = require('../../../../../../node_modules/classnames/index.js');
+var cx = require('classnames');
 var propsHelper = require('../../../../../../global/js/utils/props-helper.js');
 var InlineEditContext = require('../InlineEditContext/InlineEditContext.js');
 var usePreviousValue = require('../../../../../../global/js/hooks/usePreviousValue.js');
@@ -24,6 +24,7 @@ var InlineEditButton = require('../InlineEditButton/InlineEditButton.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var InlineEditCell = function InlineEditCell(_ref) {
@@ -252,7 +253,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
   var renderDropdownItem = function renderDropdownItem(item) {
     var includesIcon = !!(item !== null && item !== void 0 && item.icon);
     return includesIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(item.icon), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: index["default"]("".concat(blockClass, "__inline-edit--select-item"))
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--select-item"))
     }, item === null || item === void 0 ? void 0 : item.text)) : item === null || item === void 0 ? void 0 : item.text;
   };
   var handleTransformedItem = function handleTransformedItem(items) {
@@ -272,7 +273,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       style: {
         width: cell.column.totalWidth
       },
-      className: index["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--select"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--select-").concat(rowSize), rowSize)),
       items: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.items) || [],
       initialSelectedItem: cell.value,
       itemToElement: handleTransformedItem(inputProps === null || inputProps === void 0 ? void 0 : inputProps.items),
@@ -334,7 +335,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
         width: cell.column.totalWidth
       },
       datePickerType: "single",
-      className: index["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--date"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--date-").concat(rowSize), rowSize)),
       onChange: function onChange(newDate) {
         var _datePickerPreparedPr;
         var newDateObj = newDate[0];
@@ -442,7 +443,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: index["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
+      className: cx__default["default"]("".concat(blockClass, "__inline-edit--outer-cell-button"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
     }, !inEditMode && /*#__PURE__*/React__default["default"].createElement(InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
@@ -457,20 +458,20 @@ var InlineEditCell = function InlineEditCell(_ref) {
   );
 };
 InlineEditCell.propTypes = {
-  cell: index$1["default"].object,
-  config: index$1["default"].object,
-  instance: index$1["default"].shape({
-    columns: index$1["default"].arrayOf(index$1["default"].object),
-    onDataUpdate: index$1["default"].func,
-    rows: index$1["default"].arrayOf(index$1["default"].object),
-    rowSize: index$1["default"].string,
-    tableId: index$1["default"].string
+  cell: index["default"].object,
+  config: index["default"].object,
+  instance: index["default"].shape({
+    columns: index["default"].arrayOf(index["default"].object),
+    onDataUpdate: index["default"].func,
+    rows: index["default"].arrayOf(index["default"].object),
+    rowSize: index["default"].string,
+    tableId: index["default"].string
   }),
-  nonEditCell: index$1["default"].bool,
-  placeholder: index$1["default"].string,
-  tabIndex: index$1["default"].number,
-  type: index$1["default"].oneOf(['text', 'number', 'selection', 'date']),
-  value: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].node, index$1["default"].object])
+  nonEditCell: index["default"].bool,
+  placeholder: index["default"].string,
+  tabIndex: index["default"].number,
+  type: index["default"].oneOf(['text', 'number', 'selection', 'date']),
+  value: index["default"].oneOfType([index["default"].string, index["default"].node, index["default"].object])
 };
 
 exports.InlineEditCell = InlineEditCell;