@carbon/ibm-products 1.32.1 → 1.34.0

package/es/components/SidePanel/SidePanel.js

@@ -16,7 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React, { useState, useEffect, useRef } from 'react'; // Other standard imports.
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -32,6 +33,7 @@ import { usePreviousValue } from '../../global/js/hooks'; // Carbon and package
 import { Button } from 'carbon-components-react';
 import { Close20, ArrowLeft20 } from '@carbon/icons-react';
 import { ActionSet } from '../ActionSet';
+import { overlayVariants, panelVariants } from './motion/variants';
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
@@ -82,20 +84,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(open),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      shouldRender = _useState2[0],
-      setRender = _useState2[1];
+      animationComplete = _useState2[0],
+      setAnimationComplete = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      animationComplete = _useState4[0],
-      setAnimationComplete = _useState4[1];
-
-  var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      panelHeight = _useState6[0],
-      setPanelHeight = _useState6[1];
+      panelHeight = _useState4[0],
+      setPanelHeight = _useState4[1];
 
   var sidePanelRef = useRef();
   var sidePanelOverlayRef = useRef();
@@ -125,8 +122,10 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       // height css custom property
 
       if ((previousState === null || previousState === void 0 ? void 0 : previousState.size) !== size) {
+        var _sidePanelOuter$style;
+
         scrollableSection.scrollTop = 0;
-        sidePanelOuter.style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
+        sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 ? void 0 : _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
       }
     }
   }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]); // set initial focus when side panel opens
@@ -154,12 +153,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [selectorPrimaryFocus, open, animationComplete]);
   useEffect(function () {
     if (open && actions && actions.length && animationComplete) {
+      var _sidePanelOuter$style2;
+
       var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
       var actionsContainer = getActionsContainerElement();
       var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
 
       actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-      sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+      sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 ? void 0 : _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
     }
   }, [actions, condensedActions, open, animationComplete]); // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
@@ -172,13 +173,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   /* istanbul ignore next */
 
   var handleResize = function handleResize(width, height) {
+    var _sidePanelOuter$style3;
+
     setPanelHeight(height);
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
     var actionsContainer = getActionsContainerElement();
-    var actionsHeight = actionsContainer.offsetHeight + 16; // add additional 1rem spacing to bottom padding
+    var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
 
     actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
-    sidePanelOuter.style.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
+    sidePanelOuter === null || sidePanelOuter === void 0 ? void 0 : (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 ? void 0 : _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
   };
 
   var getActionsContainerElement = function getActionsContainerElement() {
@@ -263,7 +266,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
 
-    if (open && shouldRender && !animateTitle) {
+    if (open && !animateTitle) {
       var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
 
       var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
@@ -284,7 +287,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
+  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
 
   useEffect(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -310,18 +313,11 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
-
-  useEffect(function () {
-    if (open) {
-      setRender(true);
-    }
-  }, [open]); // initializes the side panel to close
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initializes the side panel to close
 
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
       onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
-      setRender(false);
     }
 
     setAnimationComplete(true);
@@ -335,13 +331,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [reducedMotion.matches]); // initializes the side panel to open
 
-  var _onAnimationStart = function onAnimationStart(event) {
-    event.persist();
-    var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
-
-    if (isPanelTarget) {
-      setAnimationComplete(false);
-    }
+  var _onAnimationStart = function onAnimationStart() {
+    setAnimationComplete(false);
   }; // used to reset margins of the slide in panel when closed/closing
 
 
@@ -358,13 +349,12 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [open, placement, selectorPageContent, slideIn]);
   useEffect(function () {
     if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
-      setRender(false);
       onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
     }
   }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
 
   useEffect(function () {
-    if (shouldRender && slideIn) {
+    if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
 
       if (placement && placement === 'right' && pageContentElement) {
@@ -377,7 +367,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -475,20 +465,22 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onResize: handleResize,
     targetRef: contentRef
   });
-  return shouldRender && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), rest, {
+  return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(moderate02) : "side-panel-entrance-left ".concat(moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(moderate02) : "side-panel-exit-left ".concat(moderate02)) : null
-    },
-    onAnimationEnd: onAnimationEnd,
-    onAnimationStart: function onAnimationStart(event) {
-      return _onAnimationStart(event);
-    },
     onBlur: handleBlur,
     ref: contentRef,
     role: "complementary",
-    "aria-label": title
+    "aria-label": title,
+    onAnimationComplete: onAnimationEnd,
+    onAnimationStart: function onAnimationStart(event) {
+      return _onAnimationStart(event);
+    },
+    variants: panelVariants,
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
+    custom: placement
   }), /*#__PURE__*/React.createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -508,13 +500,14 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tabIndex: "0",
     role: "link",
     className: "".concat(blockClass, "__visually-hidden")
-  }, "Focus sentinel")), includeOverlay && /*#__PURE__*/React.createElement("div", {
+  }, "Focus sentinel")), /*#__PURE__*/React.createElement(AnimatePresence, null, includeOverlay && /*#__PURE__*/React.createElement(motion.div, {
+    variants: overlayVariants,
+    initial: "hidden",
+    animate: "visible",
+    exit: "exit",
     ref: sidePanelOverlayRef,
-    className: "".concat(blockClass, "__overlay"),
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(moderate02) : "side-panel-overlay-exit ".concat(moderate02)) : null
-    }
-  }));
+    className: "".concat(blockClass, "__overlay")
+  }))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 SidePanel = pkg.checkComponentEnabled(SidePanel, componentName);

package/es/components/SidePanel/motion/variants.js

@@ -0,0 +1,39 @@
+import { DURATIONS, EASINGS } from '../../../global/js/utils/motionConstants';
+export var overlayVariants = {
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: DURATIONS.moderate02,
+      ease: EASINGS.productive.standard
+    }
+  },
+  hidden: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0
+  }
+};
+export var panelVariants = {
+  visible: {
+    x: 0,
+    transition: {
+      duration: DURATIONS.moderate02,
+      ease: EASINGS.productive.standard
+    }
+  },
+  hidden: function hidden(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320
+    };
+  },
+  exit: function exit(placement) {
+    return {
+      x: placement === 'right' ? '100%' : -320,
+      transition: {
+        duration: DURATIONS.moderate01,
+        ease: EASINGS.productive.exit
+      }
+    };
+  }
+};

package/es/components/index.js

@@ -40,4 +40,5 @@ export { DataSpreadsheet } from './DataSpreadsheet';
 export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
-export { EditFullPage } from './EditFullPage';
+export { EditFullPage } from './EditFullPage';
+export { InlineEditV2 } from './InlineEditV2';

package/es/global/js/package-settings.js

@@ -69,7 +69,8 @@ var defaults = {
     Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
-    EditFullPage: false
+    EditFullPage: false,
+    InlineEditV2: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/es/global/js/utils/getBezierValues.js

@@ -0,0 +1,20 @@
+import { motion } from '@carbon/motion';
+/**
+ * This function turns a cubic-bezier() string to an
+ * array of values that we can use with framer-motion
+ * @param {string} type - The carbon motion type, either 'standard', 'entrance', or 'exit'
+ * @param {string} mode - The carbon motion mode, either 'productive', or 'expressive'
+ */
+
+export var getBezierValues = function getBezierValues(type, mode) {
+  var cubicBezier = motion(type, mode);
+  var extractStringFromParens = /\(([^)]+)\)/;
+  var desiredBezierStrings = extractStringFromParens.exec(cubicBezier)[1];
+  var formattedDesiredBezierStrings = desiredBezierStrings.trim().split(',').map(Number);
+
+  if (Array.isArray(formattedDesiredBezierStrings)) {
+    return formattedDesiredBezierStrings;
+  }
+
+  return [];
+};

package/es/global/js/utils/motionConstants.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { getBezierValues } from './getBezierValues';
+import { fast01, fast02, moderate01, moderate02, slow01, slow02 } from '@carbon/motion';
+
+var cleanMotionValue = function cleanMotionValue(val) {
+  return parseInt(val) / 1000;
+};
+
+export var DURATIONS = {
+  // Micro-interactions such as button and toggle
+  fast01: cleanMotionValue(fast01),
+  // '70ms'
+  // Micro-interactions such as fade
+  fast02: cleanMotionValue(fast02),
+  // '110ms'
+  // Micro-interactions, small expansion, short distance movements
+  moderate01: cleanMotionValue(moderate01),
+  // '150ms'
+  // Expansion, system communication, toast
+  moderate02: cleanMotionValue(moderate02),
+  // '240ms'
+  // Large expansion, important system notifications
+  slow01: cleanMotionValue(slow01),
+  // '400ms'
+  //  Background dimming
+  slow02: cleanMotionValue(slow02) // '700ms'
+
+};
+export var EASINGS = {
+  productive: {
+    entrance: getBezierValues('entrance', 'productive'),
+    standard: getBezierValues('standard', 'productive'),
+    exit: getBezierValues('exit', 'productive')
+  },
+  expressive: {
+    entrance: getBezierValues('entrance', 'expressive'),
+    standard: getBezierValues('standard', 'expressive'),
+    exit: getBezierValues('exit', 'expressive')
+  }
+};

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -124,9 +124,9 @@ CreateTearsheetNarrow.propTypes = {
   formDescription: _propTypes.default.node,
 
   /**
-   * Specifies a required field that provides a title for a form
+   * Specifies an optional field that provides a title for a form
    */
-  formTitle: _propTypes.default.node.isRequired,
+  formTitle: _propTypes.default.node,
 
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -49,7 +49,8 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
 
   var previousState = (0, _hooks.usePreviousValue)({
     isEditing: isEditing,
-    windowFocused: windowFocused
+    windowFocused: windowFocused,
+    containerHasFocus: containerHasFocus
   }); // useEffect to check for window focus, if window loses focus
   // we need to clear out the keysPressedList
 
@@ -136,11 +137,11 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
 
-      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing) {
+      if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
         setKeysPressedList([]);
       }
     }
-  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
+  }, [keysPressedList, containerHasFocus, ref, isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.containerHasFocus, windowFocused, previousState === null || previousState === void 0 ? void 0 : previousState.windowFocused, usingMac]);
   return {
     keysPressedList: keysPressedList,
     windowFocused: windowFocused,

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _layout = require("@carbon/layout");
+
 var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
 
 var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
@@ -48,6 +50,8 @@ var TableContainer = _carbonComponentsReact.DataTable.TableContainer,
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var DatagridContent = function DatagridContent(_ref) {
+  var _cx4;
+
   var datagridState = _ref.datagridState;
 
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
@@ -69,7 +73,10 @@ var DatagridContent = function DatagridContent(_ref) {
       gridTitle = datagridState.gridTitle,
       gridDescription = datagridState.gridDescription,
       useDenseHeader = datagridState.useDenseHeader,
-      withInlineEdit = datagridState.withInlineEdit;
+      withInlineEdit = datagridState.withInlineEdit,
+      tableId = datagridState.tableId,
+      DatagridActions = datagridState.DatagridActions,
+      totalColumnsWidth = datagridState.totalColumnsWidth;
   var rows = DatagridPagination && datagridState.page || datagridState.rows;
   var gridActive = state.gridActive,
       editId = state.editId;
@@ -124,10 +131,24 @@ var DatagridContent = function DatagridContent(_ref) {
     isEditing: !!editId
   }),
       keysPressedList = _useMultipleKeyTracki.keysPressedList,
-      usingMac = _useMultipleKeyTracki.usingMac;
+      usingMac = _useMultipleKeyTracki.usingMac; // Provides a width for the region outline for useInlineEdit
+
 
+  (0, _react.useEffect)(function () {
+    if (!withInlineEdit) {
+      return;
+    }
+
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableHeader = document.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
+    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
+
+    if (gridActive) {
+      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
+    }
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableContainer, {
-    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : ''),
+    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
@@ -147,8 +168,9 @@ DatagridContent.propTypes = {
   datagridState: _propTypes.default.shape({
     getTableProps: _propTypes.default.func,
     withVirtualScroll: _propTypes.default.bool,
+    DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-    CustomizeColumnsModal: _propTypes.default.element,
+    CustomizeColumnsModal: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
     isFetching: _propTypes.default.bool,
     leftPanel: _propTypes.default.object,
     fullHeightDatagrid: _propTypes.default.bool,
@@ -159,6 +181,8 @@ DatagridContent.propTypes = {
     gridTitle: _propTypes.default.node,
     gridDescription: _propTypes.default.node,
     page: _propTypes.default.arrayOf(_propTypes.default.object),
-    rows: _propTypes.default.arrayOf(_propTypes.default.object)
+    rows: _propTypes.default.arrayOf(_propTypes.default.object),
+    tableId: _propTypes.default.string,
+    totalColumnsWidth: _propTypes.default.number
   })
 };

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

@@ -121,7 +121,6 @@ var Columns = function Columns(_ref) {
   }, /*#__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);

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

@@ -46,7 +46,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var InlineEditCell = function InlineEditCell(_ref) {
-  var _cx3;
+  var _config$validator, _cx3;
 
   var cell = _ref.cell,
       config = _ref.config,
@@ -111,7 +111,24 @@ var InlineEditCell = function InlineEditCell(_ref) {
       return item.id === columnId;
     });
     setCellLabel(typeof columnLabel.Header === 'string' ? columnLabel.Header : 'Inline edit cell label'); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // If you are in edit mode and click outside of the cell,
+  }, []); // Reverts cellValue back to initialValue when exiting edit mode via clicking outside
+  // of the cell (either on a regular cell or clicking into another inline edit cell) and the
+  // edit input is in an invalid state
+
+  (0, _react.useEffect)(function () {
+    if ((previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && !editId || (previousState === null || previousState === void 0 ? void 0 : previousState.editId) === cellId && cellId !== editId) {
+      var _ref3 = config || {},
+          validator = _ref3.validator;
+
+      var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+
+      if (isInvalid) {
+        setCellValue(initialValue);
+        saveCellData(initialValue);
+        return;
+      }
+    }
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.editId, editId, cellId, cellValue, config, initialValue, saveCellData]); // If you are in edit mode and click outside of the cell,
   // this changes the cell back to the InlineEditButton
 
   (0, _react.useEffect)(function () {
@@ -223,6 +240,16 @@ var InlineEditCell = function InlineEditCell(_ref) {
               return;
             }
 
+            var _ref4 = config || {},
+                validator = _ref4.validator;
+
+            var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue); // If an invalid state is detected, Tab/Enter should not do anything
+            // until the input has a valid state once again
+
+            if (isInvalid) {
+              return;
+            }
+
             var newCellId = getNewCellId(key);
             saveCellData(cellValue);
             setInitialValue(cellValue);
@@ -273,8 +300,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
   };
 
   var renderSelectCell = function renderSelectCell() {
-    var _ref3 = config || {},
-        inputProps = _ref3.inputProps;
+    var _ref5 = config || {},
+        inputProps = _ref5.inputProps;
 
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, (0, _extends2.default)({
       id: cellId,
@@ -310,8 +337,8 @@ var InlineEditCell = function InlineEditCell(_ref) {
       },
       downshiftProps: {
         onStateChange: function onStateChange(downshiftState) {
-          var _ref4 = downshiftState || {},
-              isOpen = _ref4.isOpen; // !isOpen does not work in this case because a state change occurs on hover of the
+          var _ref6 = downshiftState || {},
+              isOpen = _ref6.isOpen; // !isOpen does not work in this case because a state change occurs on hover of the
           // menu items and isOpen is changed to undefined which causes dispatch to be called unexpectedly
 
 
@@ -412,6 +439,55 @@ var InlineEditCell = function InlineEditCell(_ref) {
     return null;
   };
 
+  var renderNumberInput = function renderNumberInput() {
+    var _ref7 = config || {},
+        validator = _ref7.validator;
+
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
+      placeholder: placeholder,
+      label: cellLabel
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      invalid: validator === null || validator === void 0 ? void 0 : validator(cellValue),
+      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
+      onChange: function onChange(event) {
+        setCellValue(event.imaginaryTarget.value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(event.imaginaryTarget.value);
+        }
+      },
+      ref: numberInputRef
+    }));
+  };
+
+  var renderTextInput = function renderTextInput() {
+    var _ref8 = config || {},
+        validator = _ref8.validator;
+
+    var isInvalid = validator === null || validator === void 0 ? void 0 : validator(cellValue);
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, (0, _extends2.default)({
+      labelText: cellLabel,
+      placeholder: placeholder
+    }, inputProps, {
+      id: cellId,
+      hideLabel: true,
+      defaultValue: cellValue,
+      invalid: isInvalid,
+      invalidText: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.invalidText) || 'Provide missing invalidText',
+      onChange: function onChange(event) {
+        setCellValue(event.target.value);
+
+        if (inputProps.onChange) {
+          inputProps.onChange(event.target.value);
+        }
+      },
+      ref: textInputRef
+    }));
+  };
+
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -424,7 +500,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _cx3))
+      className: (0, _classnames.default)("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 ? void 0 : (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _cx3))
     }, !inEditMode && /*#__PURE__*/_react.default.createElement(_InlineEditButton.InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),
@@ -437,37 +513,7 @@ var InlineEditCell = function InlineEditCell(_ref) {
       totalInlineEditColumns: totalInlineEditColumns,
       totalColumns: totalColumns,
       type: type
-    }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, (0, _extends2.default)({
-      labelText: cellLabel,
-      placeholder: placeholder
-    }, inputProps, {
-      id: cellId,
-      hideLabel: true,
-      defaultValue: cellValue,
-      onChange: function onChange(event) {
-        setCellValue(event.target.value);
-
-        if (inputProps.onChange) {
-          inputProps.onChange(event.target.value);
-        }
-      },
-      ref: textInputRef
-    })), type === 'number' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, (0, _extends2.default)({
-      placeholder: placeholder,
-      label: cellLabel
-    }, inputProps, {
-      id: cellId,
-      hideLabel: true,
-      defaultValue: cellValue,
-      onChange: function onChange(event) {
-        setCellValue(event.imaginaryTarget.value);
-
-        if (inputProps.onChange) {
-          inputProps.onChange(event.imaginaryTarget.value);
-        }
-      },
-      ref: numberInputRef
-    })), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
+    }), !nonEditCell && inEditMode && cellId === activeCellId && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'text' && renderTextInput(), type === 'number' && renderNumberInput(), type === 'selection' && renderSelectCell(), type === 'date' && renderDateCell()))
   );
 };