@carbon/ibm-products 2.43.2-canary.19 → 2.43.2-canary.191

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -15,6 +15,7 @@ var icons = require('@carbon/react/icons');
 var cx = require('classnames');
 var settings = require('../../settings.js');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
+var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,32 +35,78 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     blockClass: blockClass,
     activeElement: typeof document !== 'undefined' && document.activeElement
   });
-  var visibleColumns = function visibleColumns(columns) {
+  var visibleColumns = function visibleColumns(columns, state) {
+    var _ref = state.instance || {},
+      getAsyncSubRows = _ref.getAsyncSubRows,
+      dispatch = _ref.dispatch,
+      tableState = _ref.state;
+    var fetchingDynamicSubRows = !!tableState.dynamicRowSkeleton;
     var expanderColumn = {
       id: 'expander',
-      Cell: function Cell(_ref) {
-        var row = _ref.row;
+      Cell: function Cell(_ref2) {
+        var row = _ref2.row;
         var expanderButtonProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row.getToggleRowExpandedProps()), {}, {
-          onClick: function onClick(event) {
-            // Prevents `onRowClick` from being called if `useOnRowClick` is included
-            event.stopPropagation();
-            row.toggleRowExpanded();
-            lastExpandedRowIndex.current = row.id;
-          }
+          disabled: getAsyncSubRows && fetchingDynamicSubRows,
+          onClick: function () {
+            var _onClick = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+              return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    // Prevents `onRowClick` from being called if `useOnRowClick` is included
+                    event.stopPropagation();
+                    row.toggleRowExpanded();
+                    lastExpandedRowIndex.current = row.id;
+                    if (row.isExpanded) {
+                      _context.next = 14;
+                      break;
+                    }
+                    _context.prev = 4;
+                    stateReducer.handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'start',
+                      rowId: row.id,
+                      depth: row.depth,
+                      index: row.index
+                    });
+                    _context.next = 8;
+                    return getAsyncSubRows === null || getAsyncSubRows === void 0 ? void 0 : getAsyncSubRows(row);
+                  case 8:
+                    stateReducer.handleDynamicRowCheck({
+                      dispatch: dispatch,
+                      status: 'finish',
+                      rowId: row.id
+                    });
+                    _context.next = 14;
+                    break;
+                  case 11:
+                    _context.prev = 11;
+                    _context.t0 = _context["catch"](4);
+                    console.log({
+                      error: _context.t0
+                    });
+                  case 14:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[4, 11]]);
+            }));
+            function onClick(_x) {
+              return _onClick.apply(this, arguments);
+            }
+            return onClick;
+          }()
         });
-        var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
-          _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
-          expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
-          _ref2$expanderButtonT2 = _ref2.expanderButtonTitleCollapsed,
-          expanderButtonTitleCollapsed = _ref2$expanderButtonT2 === void 0 ? 'Expand row' : _ref2$expanderButtonT2;
+        var _ref3 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
+          _ref3$expanderButtonT = _ref3.expanderButtonTitleExpanded,
+          expanderButtonTitleExpanded = _ref3$expanderButtonT === void 0 ? 'Collapse row' : _ref3$expanderButtonT,
+          _ref3$expanderButtonT2 = _ref3.expanderButtonTitleCollapsed,
+          expanderButtonTitleCollapsed = _ref3$expanderButtonT2 === void 0 ? 'Expand row' : _ref3$expanderButtonT2;
         var expanderTitle = row.isExpanded ? expanderButtonTitleExpanded : expanderButtonTitleCollapsed;
-        return row.canExpand && /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+        return (row.canExpand || getAsyncSubRows) && /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
           type: "button",
           "aria-label": expanderTitle,
           className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), /*#__PURE__*/React__default["default"].createElement(icons.ChevronRight, {
+        }, expanderButtonProps), /*#__PURE__*/React__default["default"].createElement(icons.ChevronRight, {
           className: cx__default["default"]("".concat(blockClass, "__expander-icon"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },

package/lib/components/Datagrid/useNestedRows.js

@@ -49,12 +49,13 @@ var useNestedRows = function useNestedRows(hooks) {
         expandedRowIds = _ref2.expandedRowIds;
       if (expandedRowIds) {
         Object.keys(expandedRowIds).forEach(function (key) {
+          var _row$0$original;
           var row = rows.filter(function (r) {
-            return r.id.toString() === key.toString();
+            var _r$original;
+            return r.id.toString() === key.toString() || ((_r$original = r.original) === null || _r$original === void 0 || (_r$original = _r$original.id) === null || _r$original === void 0 ? void 0 : _r$original.toString()) === key.toString();
           });
-          if (row !== null && row !== void 0 && row.length && key.toString() === row[0].id.toString()) {
-            var _row$;
-            (_row$ = row[0]) === null || _row$ === void 0 || _row$.toggleRowExpanded();
+          if (row.length && key.toString() === row[0].id.toString() || row.length && key.toString() === ((_row$0$original = row[0].original) === null || _row$0$original === void 0 || (_row$0$original = _row$0$original.id) === null || _row$0$original === void 0 ? void 0 : _row$0$original.toString())) {
+            row[0].toggleRowExpanded();
           }
         });
       }

package/lib/components/Datagrid/useRowExpander.js

@@ -59,9 +59,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx__default["default"]("".concat(blockClass, "__row-expander"), "".concat(settings.carbon.prefix, "--btn"), "".concat(settings.carbon.prefix, "--btn--ghost"))
-        }, expanderButtonProps, {
-          title: expanderTitle
-        }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
+        }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUp, {
           className: "".concat(blockClass, "__row-expander--icon")
         }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDown, {
           className: "".concat(blockClass, "__row-expander--icon")

package/lib/components/Datagrid/useRowIsMouseOver.d.ts

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

package/lib/components/Datagrid/useRowRenderer.js

@@ -9,18 +9,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var DatagridRow = require('./Datagrid/DatagridRow.js');
 
 var useRowRenderer = function useRowRenderer(hooks) {
   var useInstance = function useInstance(instance) {
-    var rows = instance.rows;
+    var _newRows;
+    var rows = instance.rows,
+      state = instance.state;
+    var newRows = null;
+    if (state !== null && state !== void 0 && state.dynamicRowSkeleton) {
+      var _state$dynamicRowSkel;
+      var depthIndexArray = state === null || state === void 0 || (_state$dynamicRowSkel = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel === void 0 ? void 0 : _state$dynamicRowSkel.id.split('').filter(function (r) {
+        return r !== '.';
+      });
+      if (depthIndexArray.length > 1) {
+        var subRows;
+        var finalRow;
+        // This will find the subRow that requested to find dynamic rows
+        // and will apply the skeleton row after that row
+        depthIndexArray.map(function (depthIndex, index) {
+          if (index === 0) {
+            subRows = rows[depthIndex].subRows;
+            return;
+          }
+          if (depthIndexArray.length - 1 === index) {
+            finalRow = subRows.find(function (r) {
+              return r.index === parseInt(depthIndex);
+            });
+            subRows.splice(finalRow.index + 1, 0, state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton); // + 1 because we want to add the skeleton row after the row initiating the dynamic request
+            return;
+          }
+          var foundRow = subRows.find(function (r) {
+            return r.index === parseInt(depthIndex);
+          });
+          subRows = foundRow.subRows;
+        });
+      }
+      var rootRowIndexWithDynamicRow = rows.findIndex(function (r) {
+        var _state$dynamicRowSkel2;
+        return r.id === (state === null || state === void 0 || (_state$dynamicRowSkel2 = state.dynamicRowSkeleton) === null || _state$dynamicRowSkel2 === void 0 ? void 0 : _state$dynamicRowSkel2.id);
+      });
+      if (rootRowIndexWithDynamicRow > -1) {
+        newRows = [].concat(_rollupPluginBabelHelpers.toConsumableArray(rows.slice(0, rootRowIndexWithDynamicRow + 1)), [// + 1 because we want to add the skeleton row after the row initiating the dynamic request
+        state === null || state === void 0 ? void 0 : state.dynamicRowSkeleton], _rollupPluginBabelHelpers.toConsumableArray(rows.slice(rootRowIndexWithDynamicRow + 1)));
+      }
+    }
+    newRows = (_newRows = newRows) !== null && _newRows !== void 0 ? _newRows : rows;
     var addRowRenderer = function addRowRenderer(row) {
       return Object.assign(row, {
         RowRenderer: DatagridRow["default"],
         subRows: (row.subRows || []).map(addRowRenderer)
       });
     };
-    var rowsWithRenderer = rows.map(addRowRenderer);
+    var rowsWithRenderer = newRows.map(addRowRenderer);
     Object.assign(instance, {
       rows: rowsWithRenderer
     });

package/lib/components/Datagrid/useSelectRows.js

@@ -90,11 +90,12 @@ var SelectRow = function SelectRow(datagridState) {
     withStickyColumn = datagridState.withStickyColumn,
     dispatch = datagridState.dispatch,
     getRowId = datagridState.getRowId;
-  var _useState = React.useState(typeof window !== 'undefined' ? window.innerWidth : ''),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useLayoutEffect(function () {
+    setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);
     }

package/lib/components/Datagrid/useSortableColumns.d.ts

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks } from 'react-table';
-export declare const getNewSortOrder: (sortOrder?: boolean | string) => {
-    newSortDesc: boolean;
-    newOrder: string;
-};
+interface Order {
+    newOrder: 'ASC' | 'DESC' | 'NONE';
+    newSortDesc: undefined | boolean;
+}
+export declare const getNewSortOrder: (currentOrder?: boolean | string) => Order;
 declare const useSortableColumns: (hooks: Hooks) => void;
 export default useSortableColumns;

package/lib/components/Datagrid/useSortableColumns.js

@@ -24,23 +24,28 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var blockClass = "".concat(settings.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;
 };
@@ -117,6 +122,15 @@ var useSortableColumns = function useSortableColumns(hooks) {
         }
         return /*#__PURE__*/React__default["default"].createElement(icons.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["default"].createElement(DatagridSelectAll.SelectAll, instance) : /*#__PURE__*/React__default["default"].createElement(react.Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
@@ -135,7 +149,11 @@ 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__default["default"]("".concat(settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__default["default"]("".concat(settings.carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, column), {}, {

package/lib/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/lib/components/Datagrid/useStickyColumn.js

@@ -27,12 +27,13 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
   var tableBodyRef = React.useRef();
   var stickyHeaderCellRef = React.useRef();
-  var _useState = React.useState(null),
+  var _useState = React.useState(),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   React.useEffect(function () {
-    setWindowSize(window.innerWidth);
+    var _window;
+    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
   }, []);
   React.useLayoutEffect(function () {
     /* istanbul ignore next */
@@ -58,10 +59,11 @@ var useStickyColumn = function useStickyColumn(hooks) {
   var useEventListener = function useEventListener(instance) {
     React.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__default["default"](onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
@@ -83,7 +85,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) {
@@ -147,18 +149,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, _rollupPluginBabelHelpers.objectSpread2({
       className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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, _rollupPluginBabelHelpers.objectSpread2({
-      className: cx__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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__default["default"](_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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
     })];

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/EditInPlace/EditInPlace.js

@@ -10,12 +10,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var icons = require('@carbon/react/icons');
 var React = require('react');
+var settings = require('../../settings.js');
 var react = require('@carbon/react');
-var cx = require('classnames');
 var index = require('../../node_modules/prop-types/index.js');
-var icons = require('@carbon/react/icons');
-var settings = require('../../settings.js');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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(settings.pkg.prefix, "--edit-in-place");
 var defaults = {
@@ -45,11 +45,13 @@ exports.EditInPlace = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -102,25 +104,29 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var onSaveHandler = function onSaveHandler() {
     setInitialValue(value);
-    setFocused(false);
     setDirtyInput(false);
     onSave();
   };
   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();
+        }
       }
     }
   };
@@ -132,17 +138,21 @@ exports.EditInPlace = /*#__PURE__*/React.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;
     }
@@ -158,6 +168,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: id,
     className: cx__default["default"]("".concat(blockClass, "__text-input"), "".concat(settings.carbon.prefix, "--text-input"), "".concat(settings.carbon.prefix, "--text-input--").concat(size)),
     type: "text",
+    placeholder: placeholder,
     value: value,
     onChange: onChangeHandler,
     ref: inputRef
@@ -260,6 +271,10 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * Provide the text that will be read by a screen reader when visiting this control
    */
   labelText: index["default"].string.isRequired,
+  /**
+   * handler to add custom onBlur event
+   */
+  onBlur: index["default"].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
    */
@@ -272,6 +287,10 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.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: index["default"].func.isRequired,
+  /**
+   * Placeholder for text input
+   */
+  placeholder: index["default"].string,
   /**
    * determines if the input is in readOnly mode
    */

package/lib/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/lib/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 {};