@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -44,7 +44,6 @@ var StepsContext = /*#__PURE__*/React.createContext(null);
 // This is a context supplied separately to each step in the container
 // to let it know what number it is in the sequence of steps
 var StepNumberContext = /*#__PURE__*/React.createContext(-1);
-
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *
@@ -123,15 +122,10 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
     firstIncludedStep = _useState20[0],
     setFirstIncludedStep = _useState20[1];
-  var _useState21 = React.useState(null),
+  var _useState21 = React.useState(),
     _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
-  var _useState23 = React.useState(0),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    headerHeight = _useState24[0],
-    setHeaderHeight = _useState24[1];
-  var headerRef = React.useRef(null);
   React.useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -143,18 +137,13 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
+
+    /**@ts-ignore */
     if (open && initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps.getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
-  React.useEffect(function () {
-    var headerHeight = 0;
-    if (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) {
-      headerHeight = headerRef.current.getBoundingClientRect().height;
-    }
-    setHeaderHeight(headerHeight);
-  }, [title, breadcrumbs]);
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
   useCreateComponentFocus.useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -166,9 +155,11 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
   useResetCreateComponent.useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
+    /**@ts-ignore */
     open: open,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
+    /**@ts-ignore */
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
@@ -181,6 +172,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
+    /**@ts-ignore */
     setShouldViewAll: setShouldViewAll,
     onClose: onClose,
     onRequestSubmit: onRequestSubmit,
@@ -201,20 +193,15 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     className: cx__default["default"](blockClass, className)
-  }, devtools.getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__header"),
-    ref: headerRef
-  }, /*#__PURE__*/React__default["default"].createElement(SimpleHeader.SimpleHeader, {
+  }, devtools.getDevtoolsProps(componentName)), (title || breadcrumbs) && /*#__PURE__*/React__default["default"].createElement(SimpleHeader.SimpleHeader, {
     title: title,
     breadcrumbs: breadcrumbs,
     noTrailingSlash: noTrailingSlash,
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
-    maxVisible: maxVisibleBreadcrumbs
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__influencer-and-body-container"),
-    style: {
-      height: "calc(100vh - ".concat(headerHeight, "px)")
-    }
+    maxVisible: maxVisibleBreadcrumbs,
+    className: "".concat(blockClass, "__header")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__influencer-and-body-container")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/React__default["default"].createElement(CreateInfluencer.CreateInfluencer, {
@@ -296,6 +283,7 @@ exports.CreateFullPage.propTypes = {
    */
   backButtonText: index["default"].string.isRequired,
   /** The header breadcrumbs */
+  /**@ts-ignore */
   breadcrumbs: index["default"].arrayOf(index["default"].shape({
     /** breadcrumb item key */
     key: index["default"].string.isRequired,

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -92,6 +92,24 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     span: 50
   }; // Half.
 
+  var renderDescription = function renderDescription() {
+    if (description) {
+      var common = _rollupPluginBabelHelpers.objectSpread2({
+        children: description,
+        className: "".concat(blockClass, "-description")
+      }, span);
+      if (typeof description === 'string') {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "p"
+        }));
+      } else if ( /*#__PURE__*/React.isValidElement(description)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "div"
+        }));
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
@@ -101,10 +119,7 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, span), title), subtitle && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
     className: "".concat(blockClass, "-subtitle"),
     as: "h6"
-  }, span), subtitle), description && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
-    className: "".concat(blockClass, "-description"),
-    as: "p"
-  }, span), description)))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
+  }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole["default"].warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
@@ -124,7 +139,7 @@ exports.CreateFullPageStep.propTypes = {
   /**
    * Sets an optional description on the progress step component
    */
-  description: index["default"].string,
+  description: index["default"].node,
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -138,6 +138,8 @@ exports.CreateTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (open && initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps.getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    } else {
+      setCurrentStep(firstIncludedStep);
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   useCreateComponentFocus.useCreateComponentFocus({

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts

@@ -1,6 +1,86 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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, ReactNode } from 'react';
+type VerticalPosition = 'normal' | 'lower';
+interface CreateTearsheetNarrowProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the CreateTearsheetNarrow.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies an optional field that provides a additional context for a form
+     */
+    formDescription?: ReactNode;
+    /**
+     * Specifies a field that provides a title for a form
+     */
+    formTitle?: ReactNode;
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Specifies an optional handler which is called when the CreateTearsheetNarrow
+     * primary button is pressed.
+     */
+    onRequestSubmit?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * Specifies the primary button's text in the CreateTearsheetNarrow.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies the secondary button's text in the CreateTearsheetNarrow.
+     */
+    secondaryButtonText: string;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position (the default) is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: VerticalPosition;
+}
 /**
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
  * Use when the form fields can be broken down into sections using section headers.
  */
-export let CreateTearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateTearsheetNarrow: React.ForwardRefExoticComponent<CreateTearsheetNarrowProps & React.RefAttributes<unknown>>;
+export {};

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -144,14 +144,15 @@ var DatagridRow = function DatagridRow(datagridState) {
   })) : /*#__PURE__*/React__default["default"].createElement("td", {
     className: "".concat(blockClass, "__table-row-ai-spacer")
   }) : null, row.cells.map(function (cell, index) {
-    var _cell$column, _content$props, _associatedHeader$;
+    var _cell$column, _cell$column2, _content$props, _associatedHeader$;
     var cellProps = cell.getCellProps();
     // eslint-disable-next-line no-unused-vars
     var children = cellProps.children;
       cellProps.role;
       var restProps = _rollupPluginBabelHelpers.objectWithoutProperties(cellProps, _excluded2);
+    var columnClassname = cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.className;
     var content = children || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && (_SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(react.SkeletonText, null))));
-    if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === commonColumnIds.selectionColumnId) {
+    if ((cell === null || cell === void 0 || (_cell$column2 = cell.column) === null || _cell$column2 === void 0 ? void 0 : _cell$column2.id) === commonColumnIds.selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
@@ -162,7 +163,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       return h.id === cell.column.id;
     });
     return /*#__PURE__*/React__default["default"].createElement(react.TableCell, _rollupPluginBabelHelpers["extends"]({
-      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)))
+      className: cx__default["default"]("".concat(blockClass, "__cell"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), "".concat(blockClass, "__slug--cell"), associatedHeader && associatedHeader.length && /*#__PURE__*/React.isValidElement((_associatedHeader$ = associatedHeader[0]) === null || _associatedHeader$ === void 0 ? void 0 : _associatedHeader$.slug)), columnClassname)
     }, restProps, {
       key: cell.column.id,
       title: title

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

@@ -174,9 +174,10 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
     var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
+    var isDisabled = colDef.disabled;
     var listContents = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(react.Checkbox, {
       checked: common.isColumnVisible(colDef),
-      disabled: isFrozenColumn,
+      disabled: isDisabled || isFrozenColumn,
       onChange: function onChange(_, _ref2) {
         var checked = _ref2.checked;
         return onSelectColumn(colDef, checked);

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

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var icons = require('@carbon/react/icons');
+var constants = require('./constants.js');
 var react = require('@carbon/react');
-var cx = require('classnames');
-var index = require('../../../../../node_modules/prop-types/index.js');
 var React = require('react');
-var settings = require('../../../../../settings.js');
-var constants = require('./constants.js');
 var layout = require('@carbon/layout');
+var icons = require('@carbon/react/icons');
+var index = require('../../../../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var settings = require('../../../../../settings.js');
 var useFilters = require('./hooks/useFilters.js');
 var useShouldDisableButtons = require('./hooks/useShouldDisableButtons.js');
 var useWindowResize = require('../../../../../global/js/hooks/useWindowResize.js');
@@ -27,8 +27,8 @@ var ActionSet = require('../../../../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Filter;
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
@@ -163,7 +163,11 @@ var FilterFlyout = function FilterFlyout(_ref) {
     setAllFilters(filtersObjectArray);
     closeFlyout();
     // From the user
-    onApply();
+    onApply({
+      filtersState: filtersState,
+      filtersObjectArray: filtersObjectArray,
+      lastAppliedFilters: lastAppliedFilters
+    });
     // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
 

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

@@ -14,11 +14,11 @@ var react = require('@carbon/react');
 var constants = require('./constants.js');
 var React = require('react');
 var variants = require('./motion/variants.js');
+var framerMotion = require('framer-motion');
 var icons = require('@carbon/react/icons');
 var FilterProvider = require('./FilterProvider.js');
 var index = require('../../../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var framerMotion = require('framer-motion');
 var settings = require('../../../../../settings.js');
 var layout = require('@carbon/layout');
 var ActionSet = require('../../../../ActionSet/ActionSet.js');
@@ -136,7 +136,11 @@ var FilterPanel = function FilterPanel(_ref) {
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     // From the user
-    onApply();
+    onApply({
+      filtersState: filtersState,
+      filtersObjectArray: filtersObjectArray,
+      lastAppliedFilters: lastAppliedFilters
+    });
     // When the user clicks apply, the action set buttons should be disabled again
     setShouldDisableButtons(true);
 

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

@@ -94,7 +94,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/lib/components/Datagrid/useEditableCell.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInlineEdit = require('./useInlineEdit.js');
+
+var useEditableCell = function useEditableCell(hooks) {
+  useInlineEdit["default"](hooks, 'usingEditableCell');
+};
+var useEditableCell$1 = useEditableCell;
+
+exports["default"] = useEditableCell$1;

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

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

package/lib/components/EditFullPage/EditFullPage.d.ts

@@ -1,6 +1,23 @@
+/**
+ * Copyright IBM Corp. 2022, 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, { ReactNode } from 'react';
+interface EditFullPageProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the contents of the EditFullPage.
+     */
+    children: ReactNode;
+}
 /**
  * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
  * See usage guidance for further details.
  */
-export let EditFullPage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditFullPage: React.ForwardRefExoticComponent<EditFullPageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditFullPage/EditFullPage.js

@@ -21,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className"];
+var _excluded = ["className", "children"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -51,8 +51,8 @@ var componentName = 'EditFullPage';
  * See usage guidance for further details.
  */
 exports.EditFullPage = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
+    children = _ref.children,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass,

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

@@ -38,7 +38,8 @@ exports.EditInPlace = /*#__PURE__*/React.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,
@@ -46,7 +47,7 @@ exports.EditInPlace = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -94,7 +95,8 @@ exports.EditInPlace = /*#__PURE__*/React.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);
     }
   };
@@ -131,15 +133,16 @@ exports.EditInPlace = /*#__PURE__*/React.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;
     }
@@ -228,7 +231,6 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * By default the edit icon is shown on hover only.
    */
   editAlwaysVisible: index["default"].bool,
-  /**
   /**
    * label for edit button
    */
@@ -252,6 +254,7 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * text that is displayed if the input is invalid
    */
+  /**@ts-ignore*/
   invalidText: index["default"].string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
@@ -290,6 +293,7 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
    */
+  /**@ts-ignore*/
   tooltipAlignment: index["default"].oneOfType([alignPropType, index["default"].shape({
     cancel: alignPropType,
     edit: alignPropType,