carbon-react 111.12.5 → 111.12.6

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

@@ -1,6 +1,8 @@
 import React from "react";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
+    /** Override the variant component */
+    as?: React.ElementType;
     /** If true the Component will be focused when rendered */
     autoFocus?: boolean;
     /** If true, the component will be disabled */
@@ -29,10 +31,14 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     required?: boolean;
 }
 export interface InputProps extends CommonInputProps {
+    /** The visible width of the text control, in average character widths */
+    cols?: number;
     /** Integer to determine a timeout for the defered callback */
     deferTimeout?: number;
     /** Defered callback to be called after the onChange event */
     onChangeDeferred?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The number of visible text lines for the control */
+    rows?: number;
     /** HTML type attribute of the input */
     type?: string;
 }

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

@@ -208,6 +208,7 @@ Input.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,
@@ -218,6 +219,7 @@ Input.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,
   "color": PropTypes.string,
+  "cols": PropTypes.number,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
@@ -482,6 +484,7 @@ Input.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   })]),
+  "rows": PropTypes.number,
   "security": PropTypes.string,
   "size": PropTypes.number,
   "slot": PropTypes.string,

package/esm/components/date/date.component.js

@@ -289,7 +289,9 @@ const DateInput = ({
     "data-component": dataComponent || "date",
     "data-element": dataElement,
     "data-role": dataRole
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+  }, filterStyledSystemMarginProps(rest), {
+    applyDateRangeStyling: !!inputRefMap
+  }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
     value: computedValue(),
     onBlur: handleBlur,
     onChange: handleChange,

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

@@ -1,9 +1,12 @@
-import styled from "styled-components";
+import styled, { css } 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";
+import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
+import StyledValidationMessage from "../../__internal__/validation-message/validation-message.style";
+import StyledLabel from "../../__internal__/label/label.style";
 const datePickerWidth = {
   large: "140px",
   medium: "135px",
@@ -22,6 +25,20 @@ const StyledDateInput = styled.div`
       margin-right: -8px;
     }
   }
+
+  ${({
+  applyDateRangeStyling,
+  size,
+  labelInline
+}) => applyDateRangeStyling && !labelInline && css`
+      ${FieldLineStyle} {
+        max-width: ${datePickerWidth[size]};
+      }
+
+      ${StyledValidationMessage}, ${StyledLabel} {
+        overflow-wrap: anywhere;
+      }
+    `}
 `;
 StyledDateInput.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"])

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

@@ -259,6 +259,7 @@ Decimal.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

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

@@ -174,6 +174,7 @@ GroupedCharacter.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

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

@@ -1 +1,2 @@
-export { default } from "./textarea";
+export { default } from "./textarea.component";
+export type { TextareaProps } from "./textarea.component";

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

@@ -0,0 +1,94 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { ValidationProps } from "../../__internal__/validations";
+import { CommonInputProps } from "../../__internal__/input";
+export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
+    /** 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;
+    /** id of the input */
+    id?: string;
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Automatically focus the input on component mount */
+    autoFocus?: boolean;
+    /** 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;
+    /** Indicate that error has occurred
+    Pass string to display icon, tooltip and red border
+    Pass true boolean to only display red border */
+    error?: boolean | string;
+    /** Allows the Textareas Height to change based on user input */
+    expandable?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+    /** Indicate additional information
+    Pass string to display icon, tooltip and blue border
+    Pass true boolean to only display blue border */
+    info?: boolean | string;
+    /**
+     * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
+     *
+     * Icon to display inside of the Textarea
+     */
+    inputIcon?: IconType;
+    /** Width of an input in percentage. Works only when labelInline is true */
+    inputWidth?: number;
+    /** The content of the label for the input */
+    label?: string;
+    /** Inline label alignment */
+    labelAlign?: "left" | "right";
+    /** 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;
+    /** One of type of size to apply to the textarea */
+    size?: "small" | "medium" | "large";
+    /** Message to be displayed in a Tooltip when the user hovers over the help icon */
+    tooltipMessage?: string;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** 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;
+    /** Indicate that warning has occurred
+    Pass string to display icon, tooltip and orange border
+    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 { Textarea as OriginalTextarea };
+export default Textarea;