@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/DecoratorBase/utils.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var getMagnitude = function getMagnitude(score, thresholds) {
+const getMagnitude = (score, thresholds) => {
   if (typeof score !== 'number') {
     return 'Unknown';
   }
@@ -29,15 +29,17 @@ var getMagnitude = function getMagnitude(score, thresholds) {
 // If a "midline" truncation has been defined,
 // then return the formatted midline value generated here,
 // else return to the original value.
-var truncate = function truncate(inputText, truncateValue) {
+const truncate = (inputText, truncateValue) => {
   if (!truncateValue) {
     return inputText;
   }
-  var maxLength = truncateValue.maxLength,
-    front = truncateValue.front,
-    back = truncateValue.back;
+  const {
+    maxLength,
+    front,
+    back
+  } = truncateValue;
   if (maxLength && inputText.length > maxLength) {
-    return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
+    return `${inputText.substring(0, front)}…${inputText.substr(inputText.length - back)}`;
   }
   return inputText;
 };

package/lib/components/DecoratorDualButton/DecoratorDualButton.js

@@ -15,14 +15,14 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
 
-var componentName = 'DecoratorDualButton';
+const componentName = 'DecoratorDualButton';
 
 /**
  * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
  * @deprecated This component is deprecated
  */
-exports.DecoratorDualButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClick', 'onContextMenu']);
+exports.DecoratorDualButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClick', 'onContextMenu']);
   return /*#__PURE__*/React.createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers.extends({
     ref: ref
   }, validProps, {
@@ -31,7 +31,7 @@ exports.DecoratorDualButton = /*#__PURE__*/React.forwardRef(function (props, ref
 });
 exports.DecoratorDualButton.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/DecoratorLink/DecoratorLink.js

@@ -15,14 +15,14 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
 
-var componentName = 'DecoratorLink';
+const componentName = 'DecoratorLink';
 
 /**
  * The DecoratorLink groups a key/value pair to behave like a link.
  * @deprecated This component is deprecated
  */
-exports.DecoratorLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+exports.DecoratorLink = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
   return /*#__PURE__*/React.createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers.extends({
     ref: ref
   }, validProps, {
@@ -31,7 +31,7 @@ exports.DecoratorLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 exports.DecoratorLink.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -15,14 +15,14 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
 
-var componentName = 'DecoratorSingleButton';
+const componentName = 'DecoratorSingleButton';
 
 /**
  * The DecoratorSingleButton groups a key/value pair to behave like a button.
  * @deprecated This component is deprecated
  */
-exports.DecoratorSingleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
+exports.DecoratorSingleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
   return /*#__PURE__*/React.createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers.extends({
     ref: ref
   }, validProps, {
@@ -31,7 +31,7 @@ exports.DecoratorSingleButton = /*#__PURE__*/React.forwardRef(function (props, r
 });
 exports.DecoratorSingleButton.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/DelimitedList/DelimitedList.js

@@ -14,10 +14,9 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["className", "delimiter", "items", "truncate"];
-var blockClass = "".concat(settings.pkg.prefix, "--delimited-list");
-var componentName = 'DelimitedList';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--delimited-list`;
+const componentName = 'DelimitedList';
+const defaults = {
   delimiter: ', ',
   items: [],
   truncate: true
@@ -26,17 +25,19 @@ var defaults = {
  * `DelimitedList` converts an array of items into a single line of
  * comma-separated values.
  */
-exports.DelimitedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$delimiter = _ref.delimiter,
-    delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? defaults.items : _ref$items,
-    _ref$truncate = _ref.truncate,
-    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.DelimitedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    className,
+    /* add other props for DelimitedList, with default values if needed */
+    delimiter = defaults.delimiter,
+    items = defaults.items,
+    truncate = defaults.truncate,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
+    className: cx(blockClass, className, [truncate && `${blockClass}-truncate`]),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), items.length > 0 ? items.join(delimiter) : '–');
 });

package/lib/components/DescriptionList/DescriptionList.js

@@ -16,11 +16,9 @@ var settings = require('../../settings.js');
 var constants = require('./constants.js');
 var react = require('@carbon/react');
 
-var _excluded = ["border", "children", "className", "size"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--description-list");
-var componentName = 'DescriptionList';
+const blockClass = `${settings.pkg.prefix}--description-list`;
+const componentName = 'DescriptionList';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -34,7 +32,7 @@ var componentName = 'DescriptionList';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   border: false,
   size: constants.DescriptionListSize.Medium
 };
@@ -43,17 +41,23 @@ var defaults = {
  * Type layouts provide an orderly layout of terms and definitions.
  * @deprecated This component is deprecated
  */
-exports.DescriptionList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$border = _ref.border,
-    border = _ref$border === void 0 ? defaults.border : _ref$border,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.DescriptionList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    border = defaults.border,
+    children /* TODO: remove if not needed. */,
+    className,
+    size = defaults.size,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--bordered"), border), "".concat(blockClass, "--").concat(size), size), className // Apply any supplied class names to the main HTML element.
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    {
+      [`${blockClass}--bordered`]: border,
+      [`${blockClass}--${size}`]: size
+    }, className // Apply any supplied class names to the main HTML element.
     ),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.StructuredListWrapper, {
@@ -63,7 +67,7 @@ exports.DescriptionList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 exports.DescriptionList.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/DescriptionList/DescriptionListBody.js

@@ -15,15 +15,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--description-list__body");
-var componentName = 'DescriptionListBody';
-exports.DescriptionListBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const blockClass = `${settings.pkg.prefix}--description-list__body`;
+const componentName = 'DescriptionListBody';
+exports.DescriptionListBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children /* TODO: remove if not needed. */,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.StructuredListBody, _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, className),
     ref: ref

package/lib/components/DescriptionList/DescriptionListCell.js

@@ -15,15 +15,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--description-list__cell");
-var componentName = 'DescriptionListCell';
-exports.DescriptionListCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const blockClass = `${settings.pkg.prefix}--description-list__cell`;
+const componentName = 'DescriptionListCell';
+exports.DescriptionListCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children /* TODO: remove if not needed. */,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.StructuredListCell, _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, className),
     ref: ref

package/lib/components/DescriptionList/DescriptionListRow.js

@@ -15,15 +15,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--description-list__row");
-var componentName = 'DescriptionListRow';
-exports.DescriptionListRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const blockClass = `${settings.pkg.prefix}--description-list__row`;
+const componentName = 'DescriptionListRow';
+exports.DescriptionListRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children /* TODO: remove if not needed. */,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.StructuredListRow, _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, className)
     // role="row"

package/lib/components/DescriptionList/constants.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var DescriptionListSize = {
+const DescriptionListSize = {
   XSmall: 'xs',
   Small: 'sm',
   Medium: 'md',

package/lib/components/EditFullPage/EditFullPage.js

@@ -14,14 +14,12 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["className", "children"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--edit-full-page");
-var componentName = 'EditFullPage';
+const blockClass = `${settings.pkg.prefix}--edit-full-page`;
+const componentName = 'EditFullPage';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -45,10 +43,18 @@ var componentName = 'EditFullPage';
  * See usage guidance for further details.
  * @deprecated
  */
-exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.EditFullPage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    className,
+    children /* TODO: remove if not needed. */,
+
+    /* TODO: add other props for EditFullPage, with default values if needed */
+
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -67,7 +73,7 @@ exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 /**@ts-ignore*/
 exports.EditFullPage.deprecated = {
   level: 'warn',
-  details: "This component is deprecated and will be removed in the next major version."
+  details: `This component is deprecated and will be removed in the next major version.`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/EditInPlace/EditInPlace.js

@@ -17,93 +17,87 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 
 var _Close, _Checkmark, _Edit;
-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 = {
+const componentName = 'EditInPlace';
+const blockClass = `${settings.pkg.prefix}--edit-in-place`;
+const defaults = {
   tooltipAlignment: 'top'};
-exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var cancelLabel = _ref.cancelLabel,
-    editAlwaysVisible = _ref.editAlwaysVisible,
-    editLabel = _ref.editLabel,
-    id = _ref.id,
-    inheritTypography = _ref.inheritTypography,
-    invalid = _ref.invalid,
-    _ref$invalidLabel = _ref.invalidLabel,
-    deprecated_invalidLabel = _ref$invalidLabel === void 0 ? ' ' : _ref$invalidLabel,
-    invalidText = _ref.invalidText,
-    labelText = _ref.labelText,
-    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),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-  var _useState3 = React.useState(''),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    initialValue = _useState4[0],
-    setInitialValue = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    dirtyInput = _useState6[0],
-    setDirtyInput = _useState6[1];
-  var inputRef = React.useRef(null);
-  var canSave = value !== initialValue && !invalid;
-  var escaping = React.useRef(false);
-  var tipAlignIsObject = _rollupPluginBabelHelpers.typeof(tooltipAlignment) === 'object';
-  var tipAlignments = ['edit', 'save', 'cancel'].reduce(function (acc, tips) {
-    var _ref2;
-    acc[tips] = (_ref2 = tipAlignIsObject ? tooltipAlignment[tips] : tooltipAlignment) !== null && _ref2 !== void 0 ? _ref2 : defaults.tooltipAlignment;
+exports.EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    cancelLabel,
+    editAlwaysVisible,
+    editLabel,
+    id,
+    inheritTypography,
+    invalid,
+    invalidLabel: deprecated_invalidLabel = ' ',
+    invalidText,
+    labelText,
+    onCancel,
+    onChange,
+    onSave,
+    onBlur,
+    // readOnly,
+    // readOnlyLabel,
+    saveLabel,
+    size = 'sm',
+    tooltipAlignment,
+    value,
+    placeholder,
+    ...rest
+  } = _ref;
+  const [focused, setFocused] = React.useState(false);
+  const [initialValue, setInitialValue] = React.useState('');
+  const [dirtyInput, setDirtyInput] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const canSave = value !== initialValue && !invalid;
+  const escaping = React.useRef(false);
+  const tipAlignIsObject = typeof tooltipAlignment === 'object';
+  const tipAlignments = ['edit', 'save', 'cancel'].reduce((acc, tips) => {
+    acc[tips] = (tipAlignIsObject ? tooltipAlignment[tips] : tooltipAlignment) ?? defaults.tooltipAlignment;
     return acc;
   }, {});
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!initialValue && !dirtyInput) {
       setInitialValue(value);
     }
   }, [initialValue, dirtyInput, value]);
-  var isTargetingChild = function isTargetingChild(_ref3) {
-    var currentTarget = _ref3.currentTarget,
-      relatedTarget = _ref3.relatedTarget;
+  const isTargetingChild = _ref2 => {
+    let {
+      currentTarget,
+      relatedTarget
+    } = _ref2;
     return currentTarget.contains(relatedTarget);
   };
-  var onChangeHandler = function onChangeHandler(_ref4) {
-    var target = _ref4.target;
+  const onChangeHandler = _ref3 => {
+    let {
+      target
+    } = _ref3;
     if (!dirtyInput) {
       setDirtyInput(true);
     }
     onChange(target.value);
   };
-  var onFocusHandler = function onFocusHandler(e) {
+  const onFocusHandler = e => {
     // if (readOnly) {
     //   return;
     // }
 
     if (!isTargetingChild(e)) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      inputRef.current?.focus();
       setFocused(true);
     }
   };
-  var onSaveHandler = function onSaveHandler() {
+  const onSaveHandler = () => {
     setInitialValue(value);
     setDirtyInput(false);
     onSave();
     setFocused(false);
   };
-  var onCancelHandler = function onCancelHandler() {
+  const onCancelHandler = () => {
     setDirtyInput(false);
     onCancel(initialValue);
   };
-  var onBlurHandler = function onBlurHandler(e) {
+  const onBlurHandler = e => {
     // Use custom function provided if passed through
     if (typeof onBlur === 'function' && !isTargetingChild(e)) {
       onBlur(initialValue);
@@ -123,20 +117,19 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   };
-  var returnHandler = function returnHandler() {
+  const returnHandler = () => {
     if (canSave) {
       onSaveHandler();
     }
   };
-  var escapeHandler = function escapeHandler() {
+  const escapeHandler = () => {
     onCancelHandler();
   };
-  var removeFocus = function removeFocus() {
-    var _inputRef$current2;
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+  const removeFocus = () => {
+    inputRef.current?.blur();
     setFocused(false);
   };
-  var onKeyHandler = function onKeyHandler(e) {
+  const onKeyHandler = e => {
     // to prevent blur handler from being called twice add additional state to check if escape is being used
     escaping.current = true;
     switch (e.key) {
@@ -154,12 +147,18 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
+    className: cx(blockClass, `${blockClass}--${size}`, {
+      [`${blockClass}--focused`]: focused,
+      [`${blockClass}--invalid`]: invalid,
+      [`${blockClass}--inherit-type`]: inheritTypography,
+      [`${blockClass}--overflows`]: inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth
+      // [`${blockClass}--readonly`]: readOnly,
+    }),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement("input", {
     id: id,
-    className: cx("".concat(blockClass, "__text-input"), "".concat(settings.carbon.prefix, "--text-input"), "".concat(settings.carbon.prefix, "--text-input--").concat(size)),
+    className: cx(`${blockClass}__text-input`, `${settings.carbon.prefix}--text-input`, `${settings.carbon.prefix}--text-input--${size}`),
     type: "text",
     placeholder: placeholder,
     value: value,
@@ -171,10 +170,10 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": labelText,
     "aria-invalid": invalid
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__toolbar")
+    className: `${blockClass}__toolbar`
   }, invalid && /*#__PURE__*/React.createElement(icons.WarningFilled, {
     size: 16,
-    className: "".concat(blockClass, "__warning-icon")
+    className: `${blockClass}__warning-icon`
   }), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.IconButton, {
     align: tipAlignments.cancel,
     size: size,
@@ -183,7 +182,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: "ghost",
     tabIndex: 0,
     key: "cancel",
-    className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-cancel")
+    className: `${blockClass}__btn ${blockClass}__btn-cancel`
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
     size: 16
   }))), /*#__PURE__*/React.createElement(react.IconButton, {
@@ -194,13 +193,15 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: "ghost",
     tabIndex: 0,
     key: "save",
-    className: "".concat(blockClass, "__btn ").concat(blockClass, "__btn-save"),
+    className: `${blockClass}__btn ${blockClass}__btn-save`,
     disabled: !canSave
   }, _Checkmark || (_Checkmark = /*#__PURE__*/React.createElement(icons.Checkmark, {
     size: 16
   })))) : /*#__PURE__*/React.createElement(react.IconButton, {
     align: tipAlignments.edit,
-    className: cx("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
+    className: cx(`${blockClass}__btn`, `${blockClass}__btn-edit`, {
+      [`${blockClass}__btn-edit--always-visible`]: editAlwaysVisible
+    }),
     size: size,
     label: editLabel,
     onClick: onFocusHandler,
@@ -210,20 +211,20 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, _Edit || (_Edit = /*#__PURE__*/React.createElement(icons.Edit, {
     size: 16
   }))))), invalid && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__warning-text")
-  }, invalidText !== null && invalidText !== void 0 ? invalidText : deprecated_invalidLabel));
+    className: `${blockClass}__warning-text`
+  }, invalidText ?? deprecated_invalidLabel));
 });
 exports.EditInPlace = settings.pkg.checkComponentEnabled(exports.EditInPlace, componentName);
 exports.EditInPlace.displayName = componentName;
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    * **Deprecated**
    * invalidLabel was misnamed, using invalidText to match Carbon
    */
   invalidText: index.default.string
 };
-var alignPropType = index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']);
-exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+const alignPropType = index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']);
+exports.EditInPlace.propTypes = {
   /**
    * label for cancel button
    */
@@ -311,7 +312,8 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * current value of the input
    */
-  value: index.default.string.isRequired
-}, deprecatedProps);
+  value: index.default.string.isRequired,
+  ...deprecatedProps
+};
 
 exports.deprecatedProps = deprecatedProps;