carbon-react 111.8.3 → 111.8.4

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -13,10 +13,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     readOnly?: boolean;
     /** Size of an input */
     size?: Sizes;
+    /** If true, the component has an icon rendered inside */
+    hasIcon?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/esm/__internal__/input/input-presentation.component.js

@@ -14,7 +14,8 @@ const InputPresentation = ({
   size = "medium",
   error,
   warning,
-  info
+  info,
+  hasIcon
 }) => {
   const {
     hasFocus,
@@ -55,7 +56,8 @@ const InputPresentation = ({
     warning: warning,
     error: error,
     info: info,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    hasIcon: hasIcon
   }, children));
 };
 
@@ -64,6 +66,7 @@ InputPresentation.propTypes = {
   "children": PropTypes.node,
   "disabled": PropTypes.bool,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "hasIcon": PropTypes.bool,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inputWidth": PropTypes.number,
   "positionedChildren": PropTypes.node,

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/esm/__internal__/input/input-presentation.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
+import StyledInput from "./input.style";
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
   inputWidth
@@ -49,11 +50,17 @@ const InputPresentationStyle = styled.div`
   width: 100%;
   margin: 0;
   ${({
-  size
+  size,
+  hasIcon,
+  align
 }) => size && css`
       min-height: ${sizes[size].height};
-      padding-left: ${sizes[size].horizontalPadding};
-      padding-right: ${sizes[size].horizontalPadding};
+
+      ${StyledInput} {
+        padding: 0 ${sizes[size].horizontalPadding};
+        ${hasIcon && align === "right" && "padding-left: 0;"}
+        ${hasIcon && align === "left" && "padding-right: 0;"}
+      }
     `}
 
   ${({

package/esm/__internal__/input-behaviour/useInputBehaviour.js

@@ -11,8 +11,13 @@ const useInputBehaviour = blockGroupBehaviour => {
   }, []); // use mouse down rather than click to accommodate click and drag events too
 
   const onMouseDown = useCallback(() => {
-    // use a zero timeout to ensure focus is applied even on click and drag events
-    setTimeout(() => inputRef && inputRef.current && inputRef.current.focus());
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        preventScroll: true
+      });
+    });
   }, []);
   const onMouseEnter = useCallback(() => setHasMouseOver(true), []);
   const onMouseLeave = useCallback(() => setHasMouseOver(false), []);

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -20,8 +20,6 @@ const InputIconToggleStyle = styled.span.attrs(({
   ${({
   size = "medium"
 }) => css`
-    margin-right: calc(-1 * ${sizes[size].horizontalPadding});
-    margin-left: calc(-1 * ${sizes[size].horizontalPadding});
     width: ${sizes[size].height};
   `}
 

package/esm/components/date/date.style.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
+import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 const datePickerWidth = {
   large: "140px",
@@ -16,6 +17,10 @@ const StyledDateInput = styled.div`
     width: ${({
   size
 }) => datePickerWidth[size]};
+
+    ${StyledInput} {
+      margin-right: -8px;
+    }
   }
 `;
 StyledDateInput.propTypes = {

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -11,7 +11,8 @@ const SelectText = ({
   placeholder,
   readOnly,
   textId,
-  transparent
+  transparent,
+  size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
@@ -31,7 +32,8 @@ const SelectText = ({
     readOnly: readOnly,
     role: "button",
     tabIndex: "-1",
-    transparent: transparent
+    transparent: transparent,
+    size: size
   }, hasPlaceholder ? placeholder : formattedValue);
 };
 
@@ -61,6 +63,9 @@ SelectText.propTypes = {
   transparent: PropTypes.bool,
 
   /** Id of the Select Text element */
-  textId: PropTypes.string
+  textId: PropTypes.string,
+
+  /** Component size */
+  size: PropTypes.string
 };
 export default SelectText;

package/esm/components/select/__internal__/select-text/select-text.d.ts

@@ -27,6 +27,8 @@ export interface SelectTextProps {
   transparent?: boolean;
   /** Id of the Select Text element */
   textId?: string;
+  /** Component size */
+  size?: string;
 }
 
 declare function SelectText(props: SelectTextProps): JSX.Element;

package/esm/components/select/__internal__/select-text/select-text.style.js

@@ -1,10 +1,12 @@
 import styled, { css } from "styled-components";
+import sizes from "../../../../__internal__/input/input-sizes.style";
 const StyledSelectText = styled.span`
   ${({
   disabled,
   hasPlaceholder,
   readOnly,
-  transparent
+  transparent,
+  size
 }) => css`
     align-items: center;
     display: inline-flex;
@@ -17,6 +19,7 @@ const StyledSelectText = styled.span`
     white-space: nowrap;
     width: 30px;
     z-index: 1;
+    padding-left: ${sizes[size].horizontalPadding};
 
     ${transparent && css`
       font-weight: 900;

package/esm/components/select/multi-select/multi-select.style.js

@@ -4,6 +4,7 @@ import { baseTheme } from "../../../style/themes";
 import InputIconToggleStyle from "../../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledSelect from "../select.style";
 import InputPresentationStyle from "../../../__internal__/input/input-presentation.style";
+import StyledInput from "../../../__internal__/input/input.style";
 import sizes from "../../../__internal__/input/input-sizes.style";
 const StyledSelectPillContainer = styled.div`
   display: flex;
@@ -18,7 +19,6 @@ const StyledSelectPillContainer = styled.div`
 `;
 const StyledSelectMultiSelect = styled(StyledSelect)`
   ${InputIconToggleStyle} {
-    margin-right: 0;
     position: absolute;
     right: 0;
     height: 100%;
@@ -28,7 +28,14 @@ const StyledSelectMultiSelect = styled(StyledSelect)`
     padding-right: ${({
   size
 }) => sizes[size].height};
+    padding-left: ${({
+  size
+}) => sizes[size].horizontalPadding};
     position: relative;
+
+    ${StyledInput} {
+      padding: 0;
+    }
   }
 `;
 const StyledAccessibilityLabelContainer = styled.div`

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -32,7 +32,7 @@ const SelectTextbox = ({
   isOpen,
   readOnly,
   placeholder,
-  size,
+  size = "medium",
   onClick,
   onFocus,
   onBlur,
@@ -122,7 +122,8 @@ const SelectTextbox = ({
       placeholder: placeholder || l.select.placeholder(),
       onClick: handleTextboxClick,
       disabled: disabled,
-      readOnly: readOnly
+      readOnly: readOnly,
+      size: size
     }, restProps));
   }
 

package/esm/components/textarea/textarea.component.js

@@ -117,6 +117,7 @@ const Textarea = ({
       }
     };
   }, [expandable]);
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -124,7 +125,8 @@ const Textarea = ({
     labelInline: labelInline,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
+    "data-element": dataElement,
+    hasIcon: hasIconInside
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,

package/esm/components/textarea/textarea.style.d.ts

@@ -1,3 +1,3 @@
-export const MIN_HEIGHT: 40;
+export const MIN_HEIGHT: 64;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textarea/textarea.style.js

@@ -1,21 +1,22 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
-import InputPresentationStyle from "../../__internal__/input/input-presentation.style";
 import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import BaseTheme from "../../style/themes/base";
-export const MIN_HEIGHT = 40;
+export const MIN_HEIGHT = 64;
 const StyledTextarea = styled.div`
   ${margin};
 
   ${StyledInput} {
+    box-sizing: border-box;
     resize: none;
     min-height: ${MIN_HEIGHT}px;
-  }
-
-  ${InputPresentationStyle} {
     padding: var(--spacing150) var(--spacing200);
+
+    ${({
+  hasIcon
+}) => hasIcon && "padding-right: var(--spacing500)"}
   }
 
   ${({
@@ -29,6 +30,10 @@ const StyledTextarea = styled.div`
 
   ${InputIconToggleStyle} {
     height: 40px;
+    position: absolute;
+    height: 100%;
+    top: 0px;
+    right: 4px;
   }
 `;
 StyledTextarea.defaultProps = {

package/esm/components/textbox/textbox.component.js

@@ -18,7 +18,7 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import NumeralDateContext from "../numeral-date/numeral-date-context";
 
 const Textbox = ({
-  align,
+  align = "left",
   autoFocus,
   children,
   disabled,
@@ -98,6 +98,7 @@ const Textbox = ({
     fieldHelp
   });
   const labelId = label ? externalLabelId || internalLabelId : "";
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -138,7 +139,8 @@ const Textbox = ({
     warning: warning,
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
-    positionedChildren: positionedChildren
+    positionedChildren: positionedChildren,
+    hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
     "data-element": "textbox-prefix"
   }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {

package/lib/__internal__/input/input-presentation.component.d.ts

@@ -13,10 +13,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     readOnly?: boolean;
     /** Size of an input */
     size?: Sizes;
+    /** If true, the component has an icon rendered inside */
+    hasIcon?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/lib/__internal__/input/input-presentation.component.js

@@ -31,7 +31,8 @@ const InputPresentation = ({
   size = "medium",
   error,
   warning,
-  info
+  info,
+  hasIcon
 }) => {
   const {
     hasFocus,
@@ -72,7 +73,8 @@ const InputPresentation = ({
     warning: warning,
     error: error,
     info: info,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    hasIcon: hasIcon
   }, children));
 };
 
@@ -81,6 +83,7 @@ InputPresentation.propTypes = {
   "children": _propTypes.default.node,
   "disabled": _propTypes.default.bool,
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "hasIcon": _propTypes.default.bool,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inputWidth": _propTypes.default.number,
   "positionedChildren": _propTypes.default.node,

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/lib/__internal__/input/input-presentation.style.js

@@ -9,6 +9,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _inputSizes = _interopRequireDefault(require("./input-sizes.style"));
 
+var _input = _interopRequireDefault(require("./input.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -65,11 +67,17 @@ const InputPresentationStyle = _styledComponents.default.div`
   width: 100%;
   margin: 0;
   ${({
-  size
+  size,
+  hasIcon,
+  align
 }) => size && (0, _styledComponents.css)`
       min-height: ${_inputSizes.default[size].height};
-      padding-left: ${_inputSizes.default[size].horizontalPadding};
-      padding-right: ${_inputSizes.default[size].horizontalPadding};
+
+      ${_input.default} {
+        padding: 0 ${_inputSizes.default[size].horizontalPadding};
+        ${hasIcon && align === "right" && "padding-left: 0;"}
+        ${hasIcon && align === "left" && "padding-right: 0;"}
+      }
     `}
 
   ${({

package/lib/__internal__/input-behaviour/useInputBehaviour.js

@@ -18,8 +18,13 @@ const useInputBehaviour = blockGroupBehaviour => {
   }, []); // use mouse down rather than click to accommodate click and drag events too
 
   const onMouseDown = (0, _react.useCallback)(() => {
-    // use a zero timeout to ensure focus is applied even on click and drag events
-    setTimeout(() => inputRef && inputRef.current && inputRef.current.focus());
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        preventScroll: true
+      });
+    });
   }, []);
   const onMouseEnter = (0, _react.useCallback)(() => setHasMouseOver(true), []);
   const onMouseLeave = (0, _react.useCallback)(() => setHasMouseOver(false), []);

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -35,8 +35,6 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   ${({
   size = "medium"
 }) => (0, _styledComponents.css)`
-    margin-right: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
-    margin-left: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
     width: ${_inputSizes.default[size].height};
   `}
 

package/lib/components/date/date.style.js

@@ -13,6 +13,8 @@ var _styledSystem = require("styled-system");
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
+
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,6 +32,10 @@ const StyledDateInput = _styledComponents.default.div`
     width: ${({
   size
 }) => datePickerWidth[size]};
+
+    ${_input.default} {
+      margin-right: -8px;
+    }
   }
 `;
 StyledDateInput.propTypes = {

package/lib/components/select/__internal__/select-text/select-text.component.js

@@ -22,7 +22,8 @@ const SelectText = ({
   placeholder,
   readOnly,
   textId,
-  transparent
+  transparent,
+  size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
@@ -42,7 +43,8 @@ const SelectText = ({
     readOnly: readOnly,
     role: "button",
     tabIndex: "-1",
-    transparent: transparent
+    transparent: transparent,
+    size: size
   }, hasPlaceholder ? placeholder : formattedValue);
 };
 
@@ -72,7 +74,10 @@ SelectText.propTypes = {
   transparent: _propTypes.default.bool,
 
   /** Id of the Select Text element */
-  textId: _propTypes.default.string
+  textId: _propTypes.default.string,
+
+  /** Component size */
+  size: _propTypes.default.string
 };
 var _default = SelectText;
 exports.default = _default;

package/lib/components/select/__internal__/select-text/select-text.d.ts

@@ -27,6 +27,8 @@ export interface SelectTextProps {
   transparent?: boolean;
   /** Id of the Select Text element */
   textId?: string;
+  /** Component size */
+  size?: string;
 }
 
 declare function SelectText(props: SelectTextProps): JSX.Element;

package/lib/components/select/__internal__/select-text/select-text.style.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _inputSizes = _interopRequireDefault(require("../../../../__internal__/input/input-sizes.style"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -16,7 +20,8 @@ const StyledSelectText = _styledComponents.default.span`
   disabled,
   hasPlaceholder,
   readOnly,
-  transparent
+  transparent,
+  size
 }) => (0, _styledComponents.css)`
     align-items: center;
     display: inline-flex;
@@ -29,6 +34,7 @@ const StyledSelectText = _styledComponents.default.span`
     white-space: nowrap;
     width: 30px;
     z-index: 1;
+    padding-left: ${_inputSizes.default[size].horizontalPadding};
 
     ${transparent && (0, _styledComponents.css)`
       font-weight: 900;

package/lib/components/select/multi-select/multi-select.style.js

@@ -17,6 +17,8 @@ var _select = _interopRequireDefault(require("../select.style"));
 
 var _inputPresentation = _interopRequireDefault(require("../../../__internal__/input/input-presentation.style"));
 
+var _input = _interopRequireDefault(require("../../../__internal__/input/input.style"));
+
 var _inputSizes = _interopRequireDefault(require("../../../__internal__/input/input-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,7 +37,6 @@ const StyledSelectPillContainer = _styledComponents.default.div`
 exports.StyledSelectPillContainer = StyledSelectPillContainer;
 const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
   ${_inputIconToggle.default} {
-    margin-right: 0;
     position: absolute;
     right: 0;
     height: 100%;
@@ -45,7 +46,14 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
     padding-right: ${({
   size
 }) => _inputSizes.default[size].height};
+    padding-left: ${({
+  size
+}) => _inputSizes.default[size].horizontalPadding};
     position: relative;
+
+    ${_input.default} {
+      padding: 0;
+    }
   }
 `;
 exports.StyledSelectMultiSelect = StyledSelectMultiSelect;

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -53,7 +53,7 @@ const SelectTextbox = ({
   isOpen,
   readOnly,
   placeholder,
-  size,
+  size = "medium",
   onClick,
   onFocus,
   onBlur,
@@ -143,7 +143,8 @@ const SelectTextbox = ({
       placeholder: placeholder || l.select.placeholder(),
       onClick: handleTextboxClick,
       disabled: disabled,
-      readOnly: readOnly
+      readOnly: readOnly,
+      size: size
     }, restProps));
   }
 

package/lib/components/textarea/textarea.component.js

@@ -147,6 +147,7 @@ const Textarea = ({
       }
     };
   }, [expandable]);
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -154,7 +155,8 @@ const Textarea = ({
     labelInline: labelInline,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
+    "data-element": dataElement,
+    hasIcon: hasIconInside
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,

package/lib/components/textarea/textarea.style.d.ts

@@ -1,3 +1,3 @@
-export const MIN_HEIGHT: 40;
+export const MIN_HEIGHT: 64;
 export default StyledTextarea;
 declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/textarea/textarea.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
-
 var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
 
 var _label = require("../../__internal__/label/label.style");
@@ -25,18 +23,20 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const MIN_HEIGHT = 40;
+const MIN_HEIGHT = 64;
 exports.MIN_HEIGHT = MIN_HEIGHT;
 const StyledTextarea = _styledComponents.default.div`
   ${_styledSystem.margin};
 
   ${_input.default} {
+    box-sizing: border-box;
     resize: none;
     min-height: ${MIN_HEIGHT}px;
-  }
-
-  ${_inputPresentation.default} {
     padding: var(--spacing150) var(--spacing200);
+
+    ${({
+  hasIcon
+}) => hasIcon && "padding-right: var(--spacing500)"}
   }
 
   ${({
@@ -50,6 +50,10 @@ const StyledTextarea = _styledComponents.default.div`
 
   ${_inputIconToggle.default} {
     height: 40px;
+    position: absolute;
+    height: 100%;
+    top: 0px;
+    right: 4px;
   }
 `;
 StyledTextarea.defaultProps = {

package/lib/components/textbox/textbox.component.js

@@ -46,7 +46,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const Textbox = ({
-  align,
+  align = "left",
   autoFocus,
   children,
   disabled,
@@ -126,6 +126,7 @@ const Textbox = ({
     fieldHelp
   });
   const labelId = label ? externalLabelId || internalLabelId : "";
+  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -166,7 +167,8 @@ const Textbox = ({
     warning: warning,
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
-    positionedChildren: positionedChildren
+    positionedChildren: positionedChildren,
+    hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/_react.default.createElement(_prefix.default, {
     "data-element": "textbox-prefix"
   }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.8.3",
+  "version": "111.8.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",