carbon-react 111.12.7 → 111.13.1

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

@@ -9,6 +9,11 @@ export interface CommonInputPresentationProps extends ValidationProps {
     align?: string;
     /** The width of the input as a percentage */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max-width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** If true, the component will be read-only */
     readOnly?: boolean;
     /** Size of an input */
@@ -20,5 +25,5 @@ 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, hasIcon, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

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

@@ -8,6 +8,7 @@ const InputPresentation = ({
   children,
   positionedChildren,
   inputWidth,
+  maxWidth,
   align,
   disabled,
   readOnly,
@@ -42,7 +43,8 @@ const InputPresentation = ({
   };
 
   return /*#__PURE__*/React.createElement(StyledInputPresentationContainer, {
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    maxWidth: maxWidth
   }, positionedChildren, /*#__PURE__*/React.createElement(InputPresentationStyle, {
     hasFocus: hasFocus,
     role: "presentation",
@@ -69,6 +71,7 @@ InputPresentation.propTypes = {
   "hasIcon": PropTypes.bool,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inputWidth": PropTypes.number,
+  "maxWidth": PropTypes.string,
   "positionedChildren": PropTypes.node,
   "readOnly": PropTypes.bool,
   "size": PropTypes.oneOf(["large", "medium", "small"]),

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

@@ -1,6 +1,6 @@
 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>;
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, 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

@@ -7,6 +7,9 @@ export const StyledInputPresentationContainer = styled.div`
 }) => inputWidth}%;
   display: flex;
   position: relative;
+  max-width: ${({
+  maxWidth
+}) => maxWidth ? `${maxWidth}` : "100%"};
 `;
 
 function stylingForValidations({

package/esm/components/decimal/decimal.component.js

@@ -418,6 +418,7 @@ Decimal.propTypes = {
   }), PropTypes.string]),
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
+  "maxWidth": PropTypes.string,
   "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/grouped-character/grouped-character.component.js

@@ -337,6 +337,7 @@ GroupedCharacter.propTypes = {
   }), PropTypes.string]),
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
+  "maxWidth": PropTypes.string,
   "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/pager/pager.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledSelectText from "../select/__internal__/select-text/select-text.style";
 import Link from "../link";
@@ -88,6 +89,10 @@ const StyledPagerNavInner = styled.div`
   display: flex;
   align-items: center;
   padding: 0 12px;
+
+  & ${StyledFormField} {
+    margin-bottom: 0;
+  }
 `;
 const StyledPagerLinkStyles = styled(Link)`
   padding: 0 10px;

package/esm/components/search/search.component.d.ts

@@ -40,6 +40,11 @@ export interface SearchProps extends ValidationProps, MarginProps {
      * Leaving the `searchWidth` prop with no value will default the width to '100%'
      */
     searchWidth?: string;
+    /**
+     * Prop for specifying the max-width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** Prop for active search threshold. This must be a positive number */
     threshold?: number;
     /** Prop for `controlled` use */
@@ -51,5 +56,5 @@ export interface SearchProps extends ValidationProps, MarginProps {
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
-export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
+export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, maxWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
 export default Search;

package/esm/components/search/search.component.js

@@ -23,6 +23,7 @@ const Search = ({
   name,
   threshold = 3,
   searchWidth,
+  maxWidth,
   searchButton,
   placeholder,
   variant = "default",
@@ -142,6 +143,7 @@ const Search = ({
   return /*#__PURE__*/React.createElement(StyledSearch, _extends({
     isFocused: isFocused,
     searchWidth: searchWidth,
+    maxWidth: maxWidth,
     searchIsActive: searchIsActive,
     searchHasValue: !isControlled ? !!(searchValue !== null && searchValue !== void 0 && searchValue.length) : !!(value !== null && value !== void 0 && value.length),
     showSearchButton: searchButton,
@@ -273,6 +275,7 @@ Search.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "maxWidth": PropTypes.string,
   "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -4,6 +4,7 @@ interface StyledSearchProps {
     searchHasValue?: boolean;
     searchIsActive?: boolean;
     searchWidth?: string;
+    maxWidth?: string;
     showSearchButton?: boolean;
     variant?: string;
 }

package/esm/components/search/search.style.js

@@ -10,6 +10,7 @@ const StyledSearch = styled.div`
   ${({
   isFocused,
   searchWidth,
+  maxWidth,
   searchIsActive,
   searchHasValue,
   showSearchButton,
@@ -22,6 +23,7 @@ const StyledSearch = styled.div`
   return css`
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
+      max-width: ${maxWidth ? `${maxWidth}` : "100%"};
       padding-bottom: 2px;
       background-color: transparent;
       border-bottom: 2px solid ${variantColor};

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

@@ -195,6 +195,12 @@ const formInputPropTypes = {
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: PropTypes.number,
 
+  /**
+   * Prop for specifying the max-width of the input.
+   * Leaving the `maxWidth` prop with no value will default the width to '100%'
+   */
+  maxWidth: PropTypes.string,
+
   /**
    * @ignore
    * @private

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

@@ -48,6 +48,11 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     inputIcon?: IconType;
     /** Width of an input in percentage. Works only when labelInline is true */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** The content of the label for the input */
     label?: string;
     /** Inline label alignment */
@@ -89,6 +94,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     Pass true boolean to only display orange border */
     warning?: boolean | string;
 }
-export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, maxWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
 export { Textarea as OriginalTextarea };
 export default Textarea;

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

@@ -47,6 +47,7 @@ const Textarea = ({
   validationOnLabel = false,
   adaptiveLabelBreakpoint,
   inputWidth,
+  maxWidth,
   labelWidth = 30,
   tooltipPosition,
   value,
@@ -126,6 +127,7 @@ const Textarea = ({
     disabled: disabled,
     readOnly: readOnly,
     inputWidth: typeof inputWidth === "number" ? inputWidth : 100 - labelWidth,
+    maxWidth: maxWidth,
     error: error,
     warning: warning,
     info: info
@@ -406,6 +408,7 @@ Textarea.propTypes = {
   }), PropTypes.string]),
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
+  "maxWidth": PropTypes.string,
   "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/textbox/textbox.component.d.ts

@@ -33,6 +33,11 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     iconTabIndex?: number;
     /** The width of the input as a percentage */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** Additional child elements to display before the input */
     leftChildren?: React.ReactNode;
     /** Label content */
@@ -88,5 +93,5 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Whether to display the character count message in red */
     warnOverLimit?: boolean;
 }
-export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
+export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, maxWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
 export default Textbox;

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

@@ -58,6 +58,7 @@ const Textbox = ({
   validationOnLabel = false,
   labelWidth = 30,
   inputWidth,
+  maxWidth,
   prefix,
   adaptiveLabelBreakpoint,
   required,
@@ -109,6 +110,7 @@ const Textbox = ({
     warning: warning,
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
+    maxWidth: maxWidth,
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
@@ -406,6 +408,7 @@ Textbox.propTypes = {
   }), PropTypes.string]),
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
+  "maxWidth": PropTypes.string,
   "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -9,6 +9,11 @@ export interface CommonInputPresentationProps extends ValidationProps {
     align?: string;
     /** The width of the input as a percentage */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max-width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** If true, the component will be read-only */
     readOnly?: boolean;
     /** Size of an input */
@@ -20,5 +25,5 @@ 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, hasIcon, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

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

@@ -25,6 +25,7 @@ const InputPresentation = ({
   children,
   positionedChildren,
   inputWidth,
+  maxWidth,
   align,
   disabled,
   readOnly,
@@ -59,7 +60,8 @@ const InputPresentation = ({
   };
 
   return /*#__PURE__*/_react.default.createElement(_inputPresentation.StyledInputPresentationContainer, {
-    inputWidth: inputWidth
+    inputWidth: inputWidth,
+    maxWidth: maxWidth
   }, positionedChildren, /*#__PURE__*/_react.default.createElement(_inputPresentation.default, {
     hasFocus: hasFocus,
     role: "presentation",
@@ -86,6 +88,7 @@ InputPresentation.propTypes = {
   "hasIcon": _propTypes.default.bool,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inputWidth": _propTypes.default.number,
+  "maxWidth": _propTypes.default.string,
   "positionedChildren": _propTypes.default.node,
   "readOnly": _propTypes.default.bool,
   "size": _propTypes.default.oneOf(["large", "medium", "small"]),

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

@@ -1,6 +1,6 @@
 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>;
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, 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

@@ -23,6 +23,9 @@ const StyledInputPresentationContainer = _styledComponents.default.div`
 }) => inputWidth}%;
   display: flex;
   position: relative;
+  max-width: ${({
+  maxWidth
+}) => maxWidth ? `${maxWidth}` : "100%"};
 `;
 exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
 

package/lib/components/decimal/decimal.component.js

@@ -437,6 +437,7 @@ Decimal.propTypes = {
   }), _propTypes.default.string]),
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
+  "maxWidth": _propTypes.default.string,
   "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/grouped-character/grouped-character.component.js

@@ -354,6 +354,7 @@ GroupedCharacter.propTypes = {
   }), _propTypes.default.string]),
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
+  "maxWidth": _propTypes.default.string,
   "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/pager/pager.style.js

@@ -11,6 +11,8 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
+var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
+
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 
 var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
@@ -112,6 +114,10 @@ const StyledPagerNavInner = _styledComponents.default.div`
   display: flex;
   align-items: center;
   padding: 0 12px;
+
+  & ${_formField.default} {
+    margin-bottom: 0;
+  }
 `;
 exports.StyledPagerNavInner = StyledPagerNavInner;
 const StyledPagerLinkStyles = (0, _styledComponents.default)(_link.default)`

package/lib/components/search/search.component.d.ts

@@ -40,6 +40,11 @@ export interface SearchProps extends ValidationProps, MarginProps {
      * Leaving the `searchWidth` prop with no value will default the width to '100%'
      */
     searchWidth?: string;
+    /**
+     * Prop for specifying the max-width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** Prop for active search threshold. This must be a positive number */
     threshold?: number;
     /** Prop for `controlled` use */
@@ -51,5 +56,5 @@ export interface SearchProps extends ValidationProps, MarginProps {
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
-export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
+export declare const Search: ({ defaultValue, onChange, onClick, onFocus, onBlur, onKeyDown, value, id, name, threshold, searchWidth, maxWidth, searchButton, placeholder, variant, "aria-label": ariaLabel, inputRef, tabIndex, error, warning, info, tooltipPosition, ...rest }: SearchProps) => JSX.Element;
 export default Search;

package/lib/components/search/search.component.js

@@ -45,6 +45,7 @@ const Search = ({
   name,
   threshold = 3,
   searchWidth,
+  maxWidth,
   searchButton,
   placeholder,
   variant = "default",
@@ -164,6 +165,7 @@ const Search = ({
   return /*#__PURE__*/_react.default.createElement(_search.default, _extends({
     isFocused: isFocused,
     searchWidth: searchWidth,
+    maxWidth: maxWidth,
     searchIsActive: searchIsActive,
     searchHasValue: !isControlled ? !!(searchValue !== null && searchValue !== void 0 && searchValue.length) : !!(value !== null && value !== void 0 && value.length),
     showSearchButton: searchButton,
@@ -296,6 +298,7 @@ Search.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "maxWidth": _propTypes.default.string,
   "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

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

@@ -4,6 +4,7 @@ interface StyledSearchProps {
     searchHasValue?: boolean;
     searchIsActive?: boolean;
     searchWidth?: string;
+    maxWidth?: string;
     showSearchButton?: boolean;
     variant?: string;
 }

package/lib/components/search/search.style.js

@@ -31,6 +31,7 @@ const StyledSearch = _styledComponents.default.div`
   ${({
   isFocused,
   searchWidth,
+  maxWidth,
   searchIsActive,
   searchHasValue,
   showSearchButton,
@@ -43,6 +44,7 @@ const StyledSearch = _styledComponents.default.div`
   return (0, _styledComponents.css)`
       ${_styledSystem.margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
+      max-width: ${maxWidth ? `${maxWidth}` : "100%"};
       padding-bottom: 2px;
       background-color: transparent;
       border-bottom: 2px solid ${variantColor};

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

@@ -216,6 +216,12 @@ const formInputPropTypes = {
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: _propTypes.default.number,
 
+  /**
+   * Prop for specifying the max-width of the input.
+   * Leaving the `maxWidth` prop with no value will default the width to '100%'
+   */
+  maxWidth: _propTypes.default.string,
+
   /**
    * @ignore
    * @private

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

@@ -48,6 +48,11 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     inputIcon?: IconType;
     /** Width of an input in percentage. Works only when labelInline is true */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** The content of the label for the input */
     label?: string;
     /** Inline label alignment */
@@ -89,6 +94,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     Pass true boolean to only display orange border */
     warning?: boolean | string;
 }
-export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ autoFocus, fieldHelp, label, size, children, characterLimit, enforceCharacterLimit, warnOverLimit, onChange, disabled, labelInline, labelAlign, labelHelp, labelSpacing, inputIcon, id: idProp, error, warning, info, name, readOnly, placeholder, expandable, rows, cols, validationOnLabel, adaptiveLabelBreakpoint, inputWidth, maxWidth, labelWidth, tooltipPosition, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: TextareaProps) => JSX.Element;
 export { Textarea as OriginalTextarea };
 export default Textarea;

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

@@ -76,6 +76,7 @@ const Textarea = ({
   validationOnLabel = false,
   adaptiveLabelBreakpoint,
   inputWidth,
+  maxWidth,
   labelWidth = 30,
   tooltipPosition,
   value,
@@ -156,6 +157,7 @@ const Textarea = ({
     disabled: disabled,
     readOnly: readOnly,
     inputWidth: typeof inputWidth === "number" ? inputWidth : 100 - labelWidth,
+    maxWidth: maxWidth,
     error: error,
     warning: warning,
     info: info
@@ -438,6 +440,7 @@ Textarea.propTypes = {
   }), _propTypes.default.string]),
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
+  "maxWidth": _propTypes.default.string,
   "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/textbox/textbox.component.d.ts

@@ -33,6 +33,11 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     iconTabIndex?: number;
     /** The width of the input as a percentage */
     inputWidth?: number;
+    /**
+     * Prop for specifying the max width of the input.
+     * Leaving the `maxWidth` prop with no value will default the width to '100%'
+     */
+    maxWidth?: string;
     /** Additional child elements to display before the input */
     leftChildren?: React.ReactNode;
     /** Label content */
@@ -88,5 +93,5 @@ export interface TextboxProps extends CommonTextboxProps {
     /** Whether to display the character count message in red */
     warnOverLimit?: boolean;
 }
-export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
+export declare const Textbox: ({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, maxWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: TextboxProps) => JSX.Element;
 export default Textbox;

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

@@ -87,6 +87,7 @@ const Textbox = ({
   validationOnLabel = false,
   labelWidth = 30,
   inputWidth,
+  maxWidth,
   prefix,
   adaptiveLabelBreakpoint,
   required,
@@ -139,6 +140,7 @@ const Textbox = ({
     warning: warning,
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
+    maxWidth: maxWidth,
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/_react.default.createElement(_prefix.default, {
@@ -438,6 +440,7 @@ Textbox.propTypes = {
   }), _propTypes.default.string]),
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
+  "maxWidth": _propTypes.default.string,
   "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/package.json

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