@carbon/ibm-products 2.33.0 → 2.35.0

package/es/components/DataSpreadsheet/utils/commonEventHandlers.js

@@ -0,0 +1,304 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { pkg } from '../../../settings.js';
+import { checkForHoldingKey } from './checkForHoldingKey.js';
+import { deepCloneObject } from '../../../global/js/utils/deepCloneObject.js';
+import uuidv4 from '../../../global/js/utils/uuidv4.js';
+import { removeCellSelections } from './removeCellSelections.js';
+import { handleHeaderCellSelection } from './handleHeaderCellSelection.js';
+import { includesShift, handleMultipleKeys, includesResourceKey } from './handleMultipleKeys.js';
+import { handleActiveCellInSelectionEnter } from './handleActiveCellInSelectionEnter.js';
+import { handleActiveCellInSelectionTab } from './handleActiveCellInSelectionTab.js';
+import { handleCellDeletion } from './handleCellDeletion.js';
+
+var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
+
+// onClick fn for each cell in the data spreadsheet body,
+// adds the active cell highlight
+
+var handleBodyCellClick = function handleBodyCellClick(cell, columnIndex, event) {
+  for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    rest[_key - 3] = arguments[_key];
+  }
+  var currentMatcher = rest[0],
+    activeCellCoordinates = rest[1],
+    selectionAreas = rest[2],
+    setActiveCellCoordinates = rest[3],
+    setSelectionAreas = rest[4],
+    setContainerHasFocus = rest[5],
+    setClickAndHoldActive = rest[6],
+    setCurrentMatcher = rest[7],
+    ref = rest[8],
+    setSelectionAreaData = rest[9],
+    setActiveCellInsideSelectionArea = rest[10],
+    activeCellRef = rest[11],
+    setValidStartingPoint = rest[12];
+  event.preventDefault();
+  var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
+  var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
+  setValidStartingPoint(isValidSelectionAreaStart);
+  var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
+  var isHoldingShiftKey = checkForHoldingKey(event, 'shiftKey');
+  setContainerHasFocus(true);
+  var activeCoordinates = {
+    row: cell.row.index,
+    column: columnIndex
+  };
+  var tempMatcher = uuidv4();
+  setClickAndHoldActive(true);
+
+  // prevent multiple selections unless cmd key is held
+  // meaning that selectionAreas should only have one item by default
+  if (isHoldingCommandKey) {
+    var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    activeCellElement.setAttribute('data-selection-id', tempMatcher);
+    setActiveCellInsideSelectionArea(true);
+    setActiveCellCoordinates(activeCoordinates);
+    setCurrentMatcher(tempMatcher);
+    setSelectionAreas(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        point1: activeCoordinates,
+        matcher: tempMatcher
+      }]);
+    });
+  } else if (isHoldingShiftKey) {
+    setContainerHasFocus(true);
+    var selectionAreaClone = deepCloneObject(selectionAreas);
+    var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+      return item.matcher === currentMatcher;
+    });
+    if (indexOfItemToUpdate === -1) {
+      // There is always a selectionArea with a point1 object that updates
+      // whenever the activeCellCoordinates update, we should always be able
+      // to find an index, but if we do not for some reason we should return
+      // at this point.
+      return;
+    } else {
+      // Update the selectionArea that was found, do not update currentMatcher
+      selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
+      selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
+      setSelectionAreas(selectionAreaClone);
+    }
+  } else {
+    activeCellRef.current.style.display = 'none';
+    setActiveCellInsideSelectionArea(false);
+    setActiveCellCoordinates(activeCoordinates);
+    // remove all previous cell selections
+    removeCellSelections({
+      spreadsheetRef: ref
+    });
+    setSelectionAreas([{
+      point1: activeCoordinates,
+      matcher: tempMatcher
+    }]);
+    setCurrentMatcher(tempMatcher);
+    setSelectionAreaData([]);
+  }
+};
+var handleBodyCellHover = function handleBodyCellHover(cell, columnIndex) {
+  for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    rest[_key2 - 2] = arguments[_key2];
+  }
+  var clickAndHoldActive = rest[0],
+    currentMatcher = rest[1],
+    setSelectionAreas = rest[2];
+  if (clickAndHoldActive) {
+    var cellCoordinates = {
+      row: cell.row.index,
+      column: columnIndex
+    };
+    setSelectionAreas(function (prev) {
+      var _selectionAreaClone$i, _selectionAreaClone$i2;
+      var selectionAreaClone = deepCloneObject(prev);
+      var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
+        return item.matcher === currentMatcher;
+      });
+      // No items in the array match up with the currentMatcher value
+      if (indexOfItemToUpdate === -1) {
+        return prev;
+      }
+      // Do not update state if you're still hovering on the same cell
+      if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
+        return prev;
+      }
+      selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
+      selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
+      return selectionAreaClone;
+    });
+  }
+};
+var handleRowHeaderClick = function handleRowHeaderClick(index, event) {
+  for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+    rest[_key3 - 2] = arguments[_key3];
+  }
+  var columns = rest[0],
+    ref = rest[1],
+    setSelectionAreas = rest[2],
+    setCurrentMatcher = rest[3],
+    setActiveCellCoordinates = rest[4],
+    activeCellCoordinates = rest[5],
+    rows = rest[6],
+    setSelectionAreaData = rest[7];
+  var isHoldingCommandKey = checkForHoldingKey(event, 'cmd');
+  handleHeaderCellSelection({
+    type: 'row',
+    activeCellCoordinates: activeCellCoordinates,
+    rows: rows,
+    columns: columns,
+    setActiveCellCoordinates: setActiveCellCoordinates,
+    setCurrentMatcher: setCurrentMatcher,
+    setSelectionAreas: setSelectionAreas,
+    spreadsheetRef: ref,
+    index: index,
+    setSelectionAreaData: setSelectionAreaData,
+    isHoldingCommandKey: isHoldingCommandKey
+  });
+};
+var handleKeyPress = function handleKeyPress(event) {
+  for (var _len4 = arguments.length, rest = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+    rest[_key4 - 1] = arguments[_key4];
+  }
+  var activeCellInsideSelectionArea = rest[0],
+    updateActiveCellCoordinates = rest[1],
+    activeCellCoordinates = rest[2],
+    removeActiveCell = rest[3],
+    columns = rest[4],
+    rows = rest[5],
+    spreadsheetRef = rest[6],
+    currentMatcher = rest[7],
+    removeCellEditor = rest[8],
+    selectionAreas = rest[9],
+    handleHomeEndKey = rest[10],
+    keysPressedList = rest[11],
+    usingMac = rest[12],
+    updateData = rest[13],
+    checkForReturnCondition = rest[14],
+    handleArrowKeyPress = rest[15],
+    setSelectionAreas = rest[16],
+    setSelectionAreaData = rest[17],
+    setCurrentMatcher = rest[18],
+    activeCellRef = rest[19],
+    setActiveCellCoordinates = rest[20],
+    setContainerHasFocus = rest[21],
+    setActiveCellContent = rest[22];
+  var key = event.key;
+  // Command keys need to be returned as there is default browser behavior with these keys
+  // Needs to be returned in editing mode
+  if (checkForReturnCondition(key)) {
+    return;
+  }
+
+  // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
+  if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
+    if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !includesShift(keysPressedList)) {
+      setSelectionAreas([]);
+      setSelectionAreaData([]);
+      removeCellSelections({
+        spreadsheetRef: spreadsheetRef
+      });
+    }
+  }
+  if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
+    handleMultipleKeys({
+      activeCellCoordinates: activeCellCoordinates,
+      event: event,
+      keysPressedList: keysPressedList,
+      selectionAreas: selectionAreas,
+      currentMatcher: currentMatcher,
+      rows: rows,
+      setSelectionAreas: setSelectionAreas,
+      columns: columns,
+      updateActiveCellCoordinates: updateActiveCellCoordinates,
+      spreadsheetRef: spreadsheetRef,
+      removeCellSelections: removeCellSelections,
+      blockClass: blockClass,
+      setCurrentMatcher: setCurrentMatcher,
+      usingMac: usingMac
+    });
+  }
+
+  // Allow arrow key navigation if there are less than two activeKeys OR
+  // if one of the activeCellCoordinates is in a header position
+  // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
+
+  if (keysPressedList.length < 2 && !includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
+    switch (key) {
+      case 'Backspace':
+      case 'Delete':
+        {
+          var deleteParams = {
+            selectionAreas: selectionAreas,
+            currentMatcher: currentMatcher,
+            rows: rows,
+            setActiveCellContent: setActiveCellContent,
+            updateData: updateData,
+            activeCellCoordinates: activeCellCoordinates
+          };
+          handleCellDeletion(deleteParams);
+          break;
+        }
+      // Enter
+      case 'Enter':
+        {
+          handleActiveCellInSelectionEnter({
+            activeCellInsideSelectionArea: activeCellInsideSelectionArea,
+            activeCellCoordinates: activeCellCoordinates,
+            activeCellRef: activeCellRef,
+            selectionAreas: selectionAreas,
+            updateActiveCellCoordinates: updateActiveCellCoordinates
+          });
+          break;
+        }
+      // HOME
+      case 'Home':
+      case 'End':
+        {
+          event.preventDefault();
+          if (includesResourceKey(keysPressedList, usingMac)) {
+            return;
+          }
+          handleHomeEndKey({
+            type: key
+          });
+          break;
+        }
+      // Tab
+      case 'Tab':
+        {
+          if (activeCellInsideSelectionArea) {
+            event.preventDefault();
+            return handleActiveCellInSelectionTab({
+              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
+              activeCellCoordinates: activeCellCoordinates,
+              activeCellRef: activeCellRef,
+              selectionAreas: selectionAreas,
+              updateActiveCellCoordinates: updateActiveCellCoordinates
+            });
+          }
+          setSelectionAreas([]);
+          removeActiveCell();
+          removeCellEditor();
+          setContainerHasFocus(false);
+          setActiveCellCoordinates(null);
+          break;
+        }
+      case 'ArrowLeft':
+      case 'ArrowUp':
+      case 'ArrowRight':
+      case 'ArrowDown':
+        {
+          handleArrowKeyPress(key);
+        }
+    }
+  }
+};
+
+export { handleBodyCellClick, handleBodyCellHover, handleKeyPress, handleRowHeaderClick };

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -98,7 +98,8 @@ var DatagridContent = function DatagridContent(_ref) {
           instance: datagridState,
           keysPressedList: keysPressedList,
           state: inlineEditState,
-          usingMac: usingMac
+          usingMac: usingMac,
+          ref: multiKeyTrackingRef
         });
       },
       onFocus: withInlineEdit && function () {

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -35,7 +35,10 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
     link: emptyStateLink
   };
   var validEmptyStates = ['error', 'noData', 'notFound'];
-  return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null,
     className: "".concat(blockClass, "__empty-state-body")
   }), /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
     colSpan: headers.length,

package/es/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -20,7 +20,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default.createElement("tbody", _extends({}, getTableBodyProps({
+    role: undefined
+  }), {
     className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -16,7 +16,10 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
     rows = datagridState.rows,
     prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
+  return /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null,
     className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useEffect, useRef } from 'react';
 import { VariableSizeList } from 'react-window';
 import { TableBody } from '@carbon/react';
@@ -77,7 +77,11 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React__default.createElement(DatagridHead, datagridState)), /*#__PURE__*/React__default.createElement(TableBody, getTableBodyProps(), /*#__PURE__*/React__default.createElement(VariableSizeList, {
+  }, /*#__PURE__*/React__default.createElement(DatagridHead, datagridState)), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: undefined
+  }), {
+    "aria-live": null
+  }), /*#__PURE__*/React__default.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
     itemSize: function itemSize(index) {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -1,5 +1,5 @@
 export default Columns;
-declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel }: {
+declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel, }: {
     getVisibleColumnsCount: any;
     filterString: any;
     columns: any;

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

@@ -153,6 +153,10 @@ var InlineEditCell = function InlineEditCell(_ref) {
       if (type === 'number') {
         numberInputRef.current.focus();
       }
+      if (type === 'selection') {
+        var _dropdownRef$current;
+        dropdownRef === null || dropdownRef === void 0 || (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 || _dropdownRef$current.focus();
+      }
     }
   }, [inEditMode, type]);
 

package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts

@@ -1,8 +1,9 @@
-export function handleGridKeyPress({ event, dispatch, state, instance, keysPressedList, usingMac, }: {
+export function handleGridKeyPress({ event, dispatch, state, instance, keysPressedList, usingMac, ref, }: {
     event: any;
     dispatch: any;
     state: any;
     instance: any;
     keysPressedList: any;
     usingMac: any;
+    ref: any;
 }): void;

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

@@ -17,7 +17,8 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
     state = _ref.state,
     instance = _ref.instance,
     keysPressedList = _ref.keysPressedList,
-    usingMac = _ref.usingMac;
+    usingMac = _ref.usingMac,
+    ref = _ref.ref;
   var key = event.key;
   var gridActive = state.gridActive,
     activeCellId = state.activeCellId,
@@ -54,8 +55,8 @@ var handleGridKeyPress = function handleGridKeyPress(_ref) {
 
   // Checks if the dropdown menu is open
   var dropdownIsActive = function dropdownIsActive() {
-    var focusedElementRole = document.activeElement.getAttribute('role');
-    if (focusedElementRole === 'listbox' && document.activeElement.classList.contains("".concat(carbon.prefix, "--list-box__menu"))) {
+    var selectedDropdown = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("\n      #".concat(instance.tableId, " .").concat(blockClass, "__table-with-inline-edit [data-cell-id=\"").concat(activeCellId, "\"] button[role='combobox']\n    "));
+    if (selectedDropdown) {
       // Prevents arrow keys from scrolling any other content when dropdown menu is open
       event.preventDefault();
       return true;

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -90,7 +90,8 @@ var stateReducer = function stateReducer(newState, action) {
         if (rows) {
           var newSelectedRowData = {};
           rows.forEach(function (row) {
-            var props = row.getRowProps();
+            var _row$getRowProps;
+            var props = (_row$getRowProps = row.getRowProps) === null || _row$getRowProps === void 0 ? void 0 : _row$getRowProps.call(row);
             if (props && props.disabled) {
               return;
             }

package/es/components/Datagrid/useEditableCell.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 useInlineEdit from './useInlineEdit.js';
+
+var useEditableCell = function useEditableCell(hooks) {
+  useInlineEdit(hooks, 'usingEditableCell');
+};
+var useEditableCell$1 = useEditableCell;
+
+export { useEditableCell$1 as default };

package/es/components/DelimitedList/DelimitedList.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * 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 React, { PropsWithChildren } from 'react';
+interface DelimitedListProps extends PropsWithChildren {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The character(s) used to separate the items.
+     */
+    delimiter?: string;
+    /**
+     * Array of items to be listed.
+     */
+    items?: any[];
+    /**
+     * Toggle the component's ability to truncate or not.
+     */
+    truncate?: boolean;
+}
 /**
  * `DelimitedList` converts an array of items into a single line of
  * comma-separated values.
  */
-export let DelimitedList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let DelimitedList: React.ForwardRefExoticComponent<DelimitedListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/DelimitedList/DelimitedList.js

@@ -20,7 +20,6 @@ var defaults = {
   items: [],
   truncate: true
 };
-
 /**
  * `DelimitedList` converts an array of items into a single line of
  * comma-separated values.

package/es/components/EditInPlace/EditInPlace.d.ts

@@ -1,6 +1,98 @@
-export let EditInPlace: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let invalidText: PropTypes.Requireable<string>;
-}
-import React from 'react';
+/**
+ * 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 React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
+type Size = 'sm' | 'md' | 'lg';
+type AlignPropType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+type Shape = {
+    cancel: AlignPropType;
+    edit: AlignPropType;
+    save: AlignPropType;
+};
+interface EditInplaceProps extends PropsWithChildren {
+    /**
+     * label for cancel button
+     */
+    cancelLabel: string;
+    /**
+     * By default the edit icon is shown on hover only.
+     */
+    editAlwaysVisible?: boolean;
+    /**
+     * label for edit button
+     */
+    editLabel: string;
+    /**
+     * Specify a custom id for the input
+     */
+    id: string;
+    /**
+     * inheritTypography - causes the text entry field to inherit typography settings
+     * assigned to the container. This is useful when editing titles for instance.
+     *
+     * NOTE: The size property limits the vertical size of the input element.
+     * Inherited font's should be selected to fit within the size selected.
+     */
+    inheritTypography?: boolean;
+    /**
+     * determines if the input is invalid
+     */
+    invalid?: boolean;
+    /**
+     * text that is displayed if the input is invalid
+     */
+    invalidText?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this control
+     */
+    labelText: string;
+    /**
+     * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
+     */
+    onCancel: (value: string) => void;
+    /**
+     * handler that is called when the input is updated
+     */
+    onChange: (value: string) => void;
+    /**
+     * handler that is called when the save button is pressed or when the user removes focus from the input if it has a new value
+     */
+    onSave: () => void;
+    /**
+     * determines if the input is in readOnly mode
+     */
+    /**
+     * label for the edit button that displays when in read only mode
+     */
+    /**
+     * label for save button
+     */
+    saveLabel: string;
+    /**
+     * vertical size of control
+     */
+    size?: Size;
+    /**
+     * tooltipAlignment from the standard tooltip. Default center.
+     *
+     * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+     */
+    tooltipAlignment?: AlignPropType | Shape;
+    /**
+     * current value of the input
+     */
+    value: string;
+}
+export declare let EditInPlace: React.ForwardRefExoticComponent<EditInplaceProps & React.RefAttributes<HTMLDivElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * invalidLabel was misnamed, using invalidText to match Carbon
+     */
+    invalidText: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/EditInPlace/EditInPlace.js

@@ -29,7 +29,8 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id = _ref.id,
     inheritTypography = _ref.inheritTypography,
     invalid = _ref.invalid,
-    deprecated_invalidLabel = _ref.invalidLabel,
+    _ref$invalidLabel = _ref.invalidLabel,
+    deprecated_invalidLabel = _ref$invalidLabel === void 0 ? ' ' : _ref$invalidLabel,
     invalidText = _ref.invalidText,
     labelText = _ref.labelText,
     onCancel = _ref.onCancel,
@@ -37,7 +38,7 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSave = _ref.onSave,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
     tooltipAlignment = _ref.tooltipAlignment,
     value = _ref.value,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +86,8 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // }
 
     if (!isTargetingChild(e)) {
-      inputRef.current.focus();
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
       setFocused(true);
     }
   };
@@ -122,15 +124,16 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onCancelHandler();
   };
   var onKeyHandler = function onKeyHandler(e) {
+    var _inputRef$current2, _inputRef$current3;
     // to prevent blur handler from being called twice add additional state to check if escape is being used
     escaping.current = true;
     switch (e.key) {
       case 'Escape':
-        inputRef.current.blur();
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
         escapeHandler();
         break;
       case 'Enter':
-        inputRef.current.blur();
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
         returnHandler();
         break;
     }
@@ -219,7 +222,6 @@ EditInPlace.propTypes = _objectSpread2({
    * By default the edit icon is shown on hover only.
    */
   editAlwaysVisible: PropTypes.bool,
-  /**
   /**
    * label for edit button
    */
@@ -243,6 +245,7 @@ EditInPlace.propTypes = _objectSpread2({
   /**
    * text that is displayed if the input is invalid
    */
+  /**@ts-ignore*/
   invalidText: PropTypes.string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
@@ -281,6 +284,7 @@ EditInPlace.propTypes = _objectSpread2({
    *
    * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
    */
+  /**@ts-ignore*/
   tooltipAlignment: PropTypes.oneOfType([alignPropType, PropTypes.shape({
     cancel: alignPropType,
     edit: alignPropType,