carbon-react 111.12.4 → 111.12.6

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

@@ -1,3 +1,9 @@
-export const MIN_HEIGHT: 64;
+export declare const MIN_HEIGHT = 64;
+export interface StyledTextAreaProps {
+    /** When true, label is placed in line an input */
+    labelInline?: boolean;
+    /** When true, adjusts padding for icon */
+    hasIcon?: boolean;
+}
+declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, StyledTextAreaProps, never>;
 export default StyledTextarea;
-declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -37,6 +37,8 @@ var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 
 var _numeralDateContext = _interopRequireDefault(require("../numeral-date/numeral-date-context"));
 
+var _box = _interopRequireDefault(require("../box"));
+
 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; }
@@ -127,38 +129,8 @@ const Textbox = ({
   });
   const labelId = label ? externalLabelId || internalLabelId : "";
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
-    disabled: disabled,
-    fieldHelpId: fieldHelpId,
-    fieldHelp: computeLabelPropValues(fieldHelp),
-    error: error,
-    warning: warning,
-    info: info,
-    label: label,
-    labelId: labelId,
-    labelAlign: computeLabelPropValues(labelAlign),
-    labelHelp: computeLabelPropValues(labelHelp),
-    labelInline: computeLabelPropValues(labelInline),
-    labelSpacing: labelSpacing,
-    labelWidth: computeLabelPropValues(labelWidth),
-    id: uniqueId,
-    reverse: computeLabelPropValues(reverse),
-    isOptional: isOptional,
-    useValidationIcon: computeLabelPropValues(validationOnLabel),
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required,
-    "data-component": dataComponent,
-    "data-role": dataRole,
-    "data-element": dataElement,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
-    validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
-    error: error,
-    warning: warning
-  }), /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
+
+  const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
     disabled: disabled,
     readOnly: readOnly,
@@ -171,9 +143,7 @@ const Textbox = ({
     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, {
-    warning: !!(!error && warning)
-  }), /*#__PURE__*/_react.default.createElement(_input.Input, _extends({}, required && {
+  }, prefix), /*#__PURE__*/_react.default.createElement(_input.Input, _extends({}, required && {
     required
   }, {
     align: align,
@@ -210,7 +180,44 @@ const Textbox = ({
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId
-  }))), characterCount));
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+    disabled: disabled,
+    fieldHelpId: fieldHelpId,
+    fieldHelp: computeLabelPropValues(fieldHelp),
+    error: error,
+    warning: warning,
+    info: info,
+    label: label,
+    labelId: labelId,
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelHelp: computeLabelPropValues(labelHelp),
+    labelInline: computeLabelPropValues(labelInline),
+    labelSpacing: labelSpacing,
+    labelWidth: computeLabelPropValues(labelWidth),
+    id: uniqueId,
+    reverse: computeLabelPropValues(reverse),
+    isOptional: isOptional,
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    isRequired: required,
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning)
+  }), input) : input), characterCount));
 };
 
 exports.Textbox = Textbox;
@@ -269,6 +276,7 @@ Textbox.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,

package/lib/components/textbox/textbox.style.js

@@ -18,10 +18,10 @@ const ErrorBorder = _styledComponents.default.span`
       position: absolute;
       z-index: 6;
       width: 2px;
-      height: calc(100% + var(--spacing300));
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
       bottom: 0px;
+      top: 0px;
     `}
 `;
 exports.ErrorBorder = ErrorBorder;

package/package.json

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

package/esm/__internal__/radio-button-mapper/radio-button-mapper.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-
-export interface RadioButtonMapperProps {
-  /** The RadioButton objects to be rendered in the group */
-  children?: React.ReactNode;
-  /** Specifies the name prop to be applied to each button in the group */
-  name: string;
-  /** Callback fired when each RadioButton is blurred */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Callback fired when the user selects a RadioButton */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Callback fired on key down */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-  /** Value of the selected RadioButton */
-  value?: string;
-}
-
-declare function RadioButtonMapper(props?: RadioButtonMapperProps): JSX.Element;
-
-export default RadioButtonMapper;

package/esm/components/radio-button/radio-button-group.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
-
-export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
-  /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLegendBreakpoint?: number;
-  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
-  adaptiveSpacingBreakpoint?: number;
-  /** The RadioButton objects to be rendered in the group */
-  children: React.ReactNode;
-  /** When true, RadioButtons are in line */
-  inline?: boolean;
-  /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
-  labelSpacing?: 1 | 2;
-  /** The content for the RadioGroup Legend */
-  legend?: string;
-  /** Text alignment of legend when inline */
-  legendAlign?: "left" | "right";
-  /** When true, legend is placed in line with the radiobuttons */
-  legendInline?: boolean;
-  /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
-  legendSpacing?: 1 | 2;
-  /** Percentage width of legend (only when legend is inline)  */
-  legendWidth?: number;
-  /** Specifies the name prop to be applied to each button in the group */
-  name: string;
-  /** Callback fired when each RadioButton is blurred */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Callback fired when the user selects a RadioButton */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** value of the selected RadioButton */
-  value?: string;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-}
-
-declare function RadioButtonGroup(props: RadioButtonGroupProps): JSX.Element;
-
-export default RadioButtonGroup;

package/esm/components/radio-button/radio-button.d.ts

@@ -1,30 +0,0 @@
-import { MarginProps } from "styled-system";
-import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
-
-export interface RadioButtonProps
-  extends CommonCheckableInputProps,
-    MarginProps {
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** When true, sets the component in line (for RadioButtonGroup) */
-  inline?: boolean;
-  /** Text alignment of the label */
-  labelAlign?: "left" | "right";
-  /** the value of the Radio Button, passed on form submit */
-  value: string;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-declare function RadioButton(
-  props: RadioButtonProps & React.RefAttributes<HTMLInputElement>
-): JSX.Element;
-
-export { RadioButton as PrivateRadioButton };
-export default RadioButton;

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

@@ -1,81 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-import { ValidationProps } from "../../__internal__/validations";
-import { CommonInputProps } from "../../__internal__/input";
-
-// TODO: Change characterLimit type to number - batch with other breaking changes
-export interface TextareaProps
-  extends ValidationProps,
-    MarginProps,
-    Omit<CommonInputProps, "size"> {
-  /** Automatically focus the input on component mount */
-  autoFocus?: boolean;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint?: number;
-  /** Character limit of the textarea */
-  characterLimit?: string | number;
-  /** Type of the icon that will be rendered next to the input */
-  children?: React.ReactNode;
-  /** The visible width of the text control, in average character widths */
-  cols?: number;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
-  /** Allows the Textareas Height to change based on user input */
-  expandable?: boolean;
-  /** id of the input */
-  id?: string;
-  /** Type of the icon that will be rendered next to the input */
-  inputIcon?: string;
-  /** Width of an input in percentage. Works only when labelInline is true */
-  inputWidth?: number;
-  /** Label */
-  label?: string;
-  /** Text applied to label help tooltip */
-  labelHelp?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing?: 1 | 2;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-  /** Name of the input */
-  name?: string;
-  /** Callback fired when the user types in the Textarea */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Placeholder text for the component */
-  placeholder?: string;
-  /** Adds readOnly property */
-  readOnly?: boolean;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** The number of visible text lines for the control */
-  rows?: number;
-  /** Size of an input */
-  size?: "small" | "medium" | "large";
-  /** Message to be displayed in a Tooltip when the user hovers over the help icon */
-  tooltipMessage?: string;
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel?: boolean;
-  /** The value of the Textbox */
-  value?: string;
-  /** Whether to display the character count message in red */
-  warnOverLimit?: boolean;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-declare function Textarea(props: TextareaProps): JSX.Element;
-
-export { Textarea as OriginalTextarea };
-export default Textarea;

package/lib/__internal__/radio-button-mapper/radio-button-mapper.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-
-export interface RadioButtonMapperProps {
-  /** The RadioButton objects to be rendered in the group */
-  children?: React.ReactNode;
-  /** Specifies the name prop to be applied to each button in the group */
-  name: string;
-  /** Callback fired when each RadioButton is blurred */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Callback fired when the user selects a RadioButton */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Callback fired on key down */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-  /** Value of the selected RadioButton */
-  value?: string;
-}
-
-declare function RadioButtonMapper(props?: RadioButtonMapperProps): JSX.Element;
-
-export default RadioButtonMapper;

package/lib/components/radio-button/radio-button-group.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
-
-export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
-  /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLegendBreakpoint?: number;
-  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
-  adaptiveSpacingBreakpoint?: number;
-  /** The RadioButton objects to be rendered in the group */
-  children: React.ReactNode;
-  /** When true, RadioButtons are in line */
-  inline?: boolean;
-  /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
-  labelSpacing?: 1 | 2;
-  /** The content for the RadioGroup Legend */
-  legend?: string;
-  /** Text alignment of legend when inline */
-  legendAlign?: "left" | "right";
-  /** When true, legend is placed in line with the radiobuttons */
-  legendInline?: boolean;
-  /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
-  legendSpacing?: 1 | 2;
-  /** Percentage width of legend (only when legend is inline)  */
-  legendWidth?: number;
-  /** Specifies the name prop to be applied to each button in the group */
-  name: string;
-  /** Callback fired when each RadioButton is blurred */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Callback fired when the user selects a RadioButton */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** value of the selected RadioButton */
-  value?: string;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-}
-
-declare function RadioButtonGroup(props: RadioButtonGroupProps): JSX.Element;
-
-export default RadioButtonGroup;

package/lib/components/radio-button/radio-button.d.ts

@@ -1,30 +0,0 @@
-import { MarginProps } from "styled-system";
-import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
-
-export interface RadioButtonProps
-  extends CommonCheckableInputProps,
-    MarginProps {
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** When true, sets the component in line (for RadioButtonGroup) */
-  inline?: boolean;
-  /** Text alignment of the label */
-  labelAlign?: "left" | "right";
-  /** the value of the Radio Button, passed on form submit */
-  value: string;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-declare function RadioButton(
-  props: RadioButtonProps & React.RefAttributes<HTMLInputElement>
-): JSX.Element;
-
-export { RadioButton as PrivateRadioButton };
-export default RadioButton;

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

@@ -1,81 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-import { ValidationProps } from "../../__internal__/validations";
-import { CommonInputProps } from "../../__internal__/input";
-
-// TODO: Change characterLimit type to number - batch with other breaking changes
-export interface TextareaProps
-  extends ValidationProps,
-    MarginProps,
-    Omit<CommonInputProps, "size"> {
-  /** Automatically focus the input on component mount */
-  autoFocus?: boolean;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-component"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-element"?: string;
-  /** Identifier used for testing purposes, applied to the root element of the component. */
-  "data-role"?: string;
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint?: number;
-  /** Character limit of the textarea */
-  characterLimit?: string | number;
-  /** Type of the icon that will be rendered next to the input */
-  children?: React.ReactNode;
-  /** The visible width of the text control, in average character widths */
-  cols?: number;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
-  /** Allows the Textareas Height to change based on user input */
-  expandable?: boolean;
-  /** id of the input */
-  id?: string;
-  /** Type of the icon that will be rendered next to the input */
-  inputIcon?: string;
-  /** Width of an input in percentage. Works only when labelInline is true */
-  inputWidth?: number;
-  /** Label */
-  label?: string;
-  /** Text applied to label help tooltip */
-  labelHelp?: React.ReactNode;
-  /** When true, label is placed in line an input */
-  labelInline?: boolean;
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing?: 1 | 2;
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth?: number;
-  /** Name of the input */
-  name?: string;
-  /** Callback fired when the user types in the Textarea */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Placeholder text for the component */
-  placeholder?: string;
-  /** Adds readOnly property */
-  readOnly?: boolean;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** The number of visible text lines for the control */
-  rows?: number;
-  /** Size of an input */
-  size?: "small" | "medium" | "large";
-  /** Message to be displayed in a Tooltip when the user hovers over the help icon */
-  tooltipMessage?: string;
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel?: boolean;
-  /** The value of the Textbox */
-  value?: string;
-  /** Whether to display the character count message in red */
-  warnOverLimit?: boolean;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
-  helpAriaLabel?: string;
-}
-
-declare function Textarea(props: TextareaProps): JSX.Element;
-
-export { Textarea as OriginalTextarea };
-export default Textarea;