@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/es/components/Datagrid/useSortableColumns.js

@@ -15,23 +15,28 @@ import { SelectAll } from './Datagrid/DatagridSelectAll.js';
 import { DatagridSlug } from './Datagrid/addons/Slug/DatagridSlug.js';
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var ordering = {
-  ASC: 'ASC',
-  DESC: 'DESC',
-  NONE: 'NONE'
-};
-var getNewSortOrder = function getNewSortOrder(sortOrder) {
+var getNewSortOrder = function getNewSortOrder(currentOrder) {
   var order = {
-    newSortDesc: false,
-    newOrder: ordering.NONE
+    newOrder: 'NONE',
+    newSortDesc: undefined
   };
-  if (sortOrder === false || sortOrder === ordering.DESC) {
-    order.newOrder = ordering.DESC;
+
+  // NONE => ASC
+  if (currentOrder === undefined) {
+    order.newOrder = 'ASC';
+    order.newSortDesc = false;
+  }
+
+  // ACS => DESC
+  if (currentOrder === false || currentOrder === 'DESC') {
+    order.newOrder = 'DESC';
     order.newSortDesc = true;
   }
-  if (sortOrder === undefined || sortOrder === ordering.ASC) {
-    order.newOrder = ordering.ASC;
-    order.newSortDesc = false;
+
+  // DESC => NONE
+  if (currentOrder === true || currentOrder === 'ASC') {
+    order.newOrder = 'NONE';
+    order.newSortDesc = undefined;
   }
   return order;
 };
@@ -90,6 +95,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       instance.toggleSortBy(key, newSortDesc, false);
     };
     var sortableColumns = visibleColumns.map(function (column) {
+      var _column$minWidth;
       var icon = function icon(col, props) {
         var iconProps = _objectSpread2(_objectSpread2({
           size: 16
@@ -108,6 +114,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
         }
         return /*#__PURE__*/React__default.createElement(ArrowsVertical, iconProps);
       };
+      var handleKey = function handleKey(e, columnId) {
+        var key = e.key;
+        if (key === 'Enter') {
+          setTimeout(function () {
+            var _document$getElementB;
+            return (_document$getElementB = document.getElementById(columnId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+          }, 0);
+        }
+      };
       var Header = function Header(headerProp) {
         return column.disableSortBy === true || column.id === 'datagridSelection' || column.isAction ? column.disableSortBy || column.isAction ? column.Header : /*#__PURE__*/React__default.createElement(SelectAll, instance) : /*#__PURE__*/React__default.createElement(Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
@@ -126,12 +141,16 @@ var useSortableColumns = function useSortableColumns(hooks) {
               slug: headerProp === null || headerProp === void 0 || (_headerProp$column = headerProp.column) === null || _headerProp$column === void 0 ? void 0 : _headerProp$column.slug
             }), icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props));
           },
-          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
+          id: column === null || column === void 0 ? void 0 : column.id,
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false)),
+          onKeyDown: function onKeyDown(event) {
+            return handleKey(event, column.id);
+          }
         }, column.Header);
       };
       return _objectSpread2(_objectSpread2({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
+        minWidth: column.disableSortBy ? 0 : (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : column.isAction ? 50 : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);
@@ -147,6 +166,5 @@ var useSortableColumns = function useSortableColumns(hooks) {
   hooks.visibleColumns.push(sortableVisibleColumns);
   hooks.useInstance.push(sortInstanceProps);
 };
-var useSortableColumns$1 = useSortableColumns;
 
-export { useSortableColumns$1 as default, getNewSortOrder };
+export { useSortableColumns as default, getNewSortOrder };

package/es/components/Datagrid/useStickyColumn.d.ts

@@ -1,2 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * 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 { Hooks } from 'react-table';
+declare const useStickyColumn: (hooks: Hooks) => void;
 export default useStickyColumn;
-declare function useStickyColumn(hooks: any): void;

package/es/components/Datagrid/useStickyColumn.js

@@ -18,12 +18,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = useRef();
   var stickyHeaderCellRef = useRef();
-  var _useState = useState(null),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useEffect(function () {
-    setWindowSize(window.innerWidth);
+    var _window;
+    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
   }, []);
   useLayoutEffect(function () {
     /* istanbul ignore next */
@@ -49,10 +50,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
   var useEventListener = function useEventListener(instance) {
     useEffect(function () {
       var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef.current;
+      var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
       /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
-        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+        var _headerCellElement$cl;
+        headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
       }
       var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
@@ -74,7 +76,7 @@ var useStickyColumn = function useStickyColumn(hooks) {
       };
       toggleStickyShadow(tableBodyElement, headerCellElement);
       if (tableBodyElement) {
-        tableBodyElement.addEventListener('scroll', listener);
+        tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
       }
       return function () {
         if (tableBodyElement) {
@@ -138,18 +140,19 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
   }];
 };
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
-  var column = data.column || data.cell.column;
-  if (column.sticky === 'right') {
+  var _data$cell;
+  var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
     return [props, _objectSpread2({
       className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
-  if (column.sticky === 'left') {
+  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
     var _data$instance;
     return [props, _objectSpread2({
-      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
+      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];
@@ -189,6 +192,5 @@ var hasVertScroll = function hasVertScroll(element) {
     clientHeight = element.clientHeight;
   return scrollHeight > clientHeight;
 };
-var useStickyColumn$1 = useStickyColumn;
 
-export { useStickyColumn$1 as default };
+export { useStickyColumn as default };

package/es/components/Decorator/Decorator.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -87,7 +87,8 @@ Decorator.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorBase/DecoratorBase.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { getMagnitude, truncate } from './utils.js';
@@ -23,8 +23,7 @@ var defaults = {
   onContextMenu: function onContextMenu() {},
   onContextMenuLabel: function onContextMenuLabel() {},
   onContextMenuValue: function onContextMenuValue() {},
-  scoreThresholds: [0, 4, 7, 10],
-  theme: 'light'
+  scoreThresholds: [0, 4, 7, 10]
 };
 
 /**
@@ -56,8 +55,7 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$scoreThresholds = _ref.scoreThresholds,
     scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
     small = _ref.small,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    theme = _ref.theme,
     truncateValue = _ref.truncateValue,
     value = _ref.value,
     valueTitle = _ref.valueTitle,
@@ -67,7 +65,7 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var _value = truncate(value, truncateValue);
 
   // These class names apply to all types of DecoratorBase.
-  var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
+  var classNames = cx(blockClass, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--").concat(theme), theme), "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
 
   // These properties apply to all <DecoratorIcons>.
   var decoratorIconsProps = {

package/es/components/DecoratorBase/DecoratorIcon.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { CircleStroke, ChevronMini, Caution, DiamondFill, SquareFill, CircleFill } from '@carbon/react/icons';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';

package/es/components/DecoratorDualButton/DecoratorDualButton.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -111,7 +111,8 @@ DecoratorDualButton.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorLink/DecoratorLink.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -101,7 +101,8 @@ DecoratorLink.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

package/es/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -101,7 +101,8 @@ DecoratorSingleButton.propTypes = {
    */
   small: PropTypes.bool,
   /**
-   * Determines the theme of the component.
+   * Override the default theme of the component.
+   * Useful if you want "invert" the component's theme.
    */
   theme: PropTypes.oneOf(['light', 'dark']),
   /**

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
-interface DelimitedListProps extends PropsWithChildren {
+export interface DelimitedListProps extends PropsWithChildren {
     /**
      * Provide an optional class to be applied to the containing node.
      */
@@ -28,4 +28,3 @@ interface DelimitedListProps extends PropsWithChildren {
  * comma-separated values.
  */
 export declare let DelimitedList: React.ForwardRefExoticComponent<DelimitedListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/DelimitedList/DelimitedList.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

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

@@ -1 +1,8 @@
-export { DelimitedList } from "./DelimitedList";
+/**
+ * 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.
+ */
+export { DelimitedList } from './DelimitedList';
+export type { DelimitedListProps } from './DelimitedList';

package/es/components/DescriptionList/DescriptionList.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/DescriptionList/DescriptionListBody.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/DescriptionList/DescriptionListCell.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/DescriptionList/DescriptionListRow.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/EditFullPage/EditFullPage.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface EditFullPageProps {
+export interface EditFullPageProps {
     /**
      * Provide an optional class to be applied to the containing node.
      */
@@ -20,4 +20,3 @@ interface EditFullPageProps {
  * See usage guidance for further details.
  */
 export declare let EditFullPage: React.ForwardRefExoticComponent<EditFullPageProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/EditFullPage/EditFullPage.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/EditFullPage/index.d.ts

@@ -1 +1,8 @@
-export { EditFullPage } from "./EditFullPage";
+/**
+ * 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.
+ */
+export { EditFullPage } from './EditFullPage';
+export type { EditFullPageProps } from './EditFullPage';

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

@@ -13,7 +13,7 @@ type Shape = {
     edit: AlignPropType;
     save: AlignPropType;
 };
-interface EditInplaceProps extends PropsWithChildren {
+export interface EditInplaceProps extends PropsWithChildren {
     /**
      * label for cancel button
      */
@@ -50,6 +50,10 @@ interface EditInplaceProps extends PropsWithChildren {
      * Provide the text that will be read by a screen reader when visiting this control
      */
     labelText: string;
+    /**
+     * handler to add custom onBlur event
+     */
+    onBlur?: (value: string) => void;
     /**
      * 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
      */
@@ -86,6 +90,10 @@ interface EditInplaceProps extends PropsWithChildren {
      * current value of the input
      */
     value: string;
+    /**
+     * placeholder for the input
+     */
+    placeholder?: string;
 }
 export declare let EditInPlace: React.ForwardRefExoticComponent<EditInplaceProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {

package/es/components/EditInPlace/EditInPlace.js

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, typeof as _typeof, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, typeof as _typeof, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { WarningFilled, Close, Checkmark, Edit } from '@carbon/react/icons';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { pkg, carbon } from '../../settings.js';
 import { IconButton } from '@carbon/react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import { WarningFilled, Close, Checkmark, Edit } from '@carbon/react/icons';
-import { pkg, carbon } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
 var _Close, _Checkmark, _Edit;
-var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "value"];
+var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "onBlur", "saveLabel", "size", "tooltipAlignment", "value", "placeholder"];
 var componentName = 'EditInPlace';
 var blockClass = "".concat(pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -36,11 +36,13 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onCancel = _ref.onCancel,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
+    onBlur = _ref.onBlur,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     tooltipAlignment = _ref.tooltipAlignment,
     value = _ref.value,
+    placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -93,25 +95,30 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var onSaveHandler = function onSaveHandler() {
     setInitialValue(value);
-    setFocused(false);
     setDirtyInput(false);
     onSave();
+    setFocused(false);
   };
   var onCancelHandler = function onCancelHandler() {
-    setFocused(false);
     setDirtyInput(false);
     onCancel(initialValue);
   };
   var onBlurHandler = function onBlurHandler(e) {
-    // if (readOnly || escaping.current) {
-    if (escaping.current) {
-      return;
-    }
-    if (!isTargetingChild(e)) {
-      if (canSave) {
-        onSaveHandler();
-      } else {
-        onCancelHandler();
+    // Use custom function provided if passed through
+    if (typeof onBlur === 'function' && !isTargetingChild(e)) {
+      onBlur(initialValue);
+      setFocused(false);
+    } else {
+      // Use Default behavior if no custom function provided
+      if (escaping.current) {
+        return;
+      }
+      if (!isTargetingChild(e)) {
+        if (canSave) {
+          onSaveHandler();
+        } else {
+          onCancelHandler();
+        }
       }
     }
   };
@@ -123,17 +130,21 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var escapeHandler = function escapeHandler() {
     onCancelHandler();
   };
+  var removeFocus = function removeFocus() {
+    var _inputRef$current2;
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    setFocused(false);
+  };
   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$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+        removeFocus();
         escapeHandler();
         break;
       case 'Enter':
-        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
+        removeFocus();
         returnHandler();
         break;
     }
@@ -149,6 +160,7 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: id,
     className: cx("".concat(blockClass, "__text-input"), "".concat(carbon.prefix, "--text-input"), "".concat(carbon.prefix, "--text-input--").concat(size)),
     type: "text",
+    placeholder: placeholder,
     value: value,
     onChange: onChangeHandler,
     ref: inputRef
@@ -158,9 +170,6 @@ var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": labelText,
     "aria-invalid": invalid
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__ellipsis"),
-    "aria-hidden": !focused
-  }, "\u2026"), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__toolbar")
   }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     size: 16,
@@ -251,6 +260,10 @@ EditInPlace.propTypes = _objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: PropTypes.string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: PropTypes.func,
   /**
    * 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
    */
@@ -263,6 +276,10 @@ EditInPlace.propTypes = _objectSpread2({
    * 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: PropTypes.func.isRequired,
+  /**
+   * Placeholder for text input
+   */
+  placeholder: PropTypes.string,
   /**
    * determines if the input is in readOnly mode
    */

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

@@ -1 +1,8 @@
-export { EditInPlace } from "./EditInPlace";
+/**
+ * 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.
+ */
+export { EditInPlace } from './EditInPlace';
+export type { EditInplaceProps } from './EditInPlace';

package/es/components/EditSidePanel/EditSidePanel.d.ts

@@ -4,9 +4,9 @@
  * 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, { ReactNode } from 'react';
 import '../../global/js/utils/props-helper';
-interface EditSidePanelProps {
+import React, { ReactNode } from 'react';
+export interface EditSidePanelProps {
     /**
      * Sets the body content of the create side panel
      */
@@ -92,4 +92,3 @@ interface EditSidePanelProps {
  * Use with medium complexity edits if the user needs page context.
  */
 export declare let EditSidePanel: React.ForwardRefExoticComponent<EditSidePanelProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/EditSidePanel/EditSidePanel.js

@@ -6,15 +6,15 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import '../../global/js/utils/props-helper.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import { Form } from '@carbon/react';
+import PropTypes from '../../_virtual/index.js';
+import { SidePanel } from '../SidePanel/SidePanel.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { Form } from '@carbon/react';
-import '../../global/js/utils/props-helper.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
-import { SidePanel } from '../SidePanel/SidePanel.js';
 
 var _excluded = ["children", "className", "disableSubmit", "id", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];