carbon-react 121.0.2 → 121.2.0

package/esm/__internal__/character-count/character-count.style.js

@@ -3,14 +3,10 @@ import baseTheme from "../../style/themes/base";
 import visuallyHidden from "../../style/utils/visually-hidden";
 const StyledCharacterCountWrapper = styled.div``;
 const StyledCharacterCount = styled.div`
-  ::after {
-    content: " ";
-  }
-
   text-align: left;
-  font-size: 12px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  font-size: var(--fontSizes100);
+  margin-top: var(--spacing050);
+  margin-bottom: var(--spacing050);
   color: ${({
   isOverLimit
 }) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
@@ -18,7 +14,7 @@ const StyledCharacterCount = styled.div`
   ${({
   isOverLimit
 }) => isOverLimit && css`
-      font-weight: 700;
+      font-weight: var(--fontWeights700);
     `}
 `;
 const VisuallyHiddenCharacterCount = styled.div`

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface EditorValidationWrapperProps {
+    /** Message to be displayed when there is an error */
+    error?: string;
+    /** Message to be displayed when there is a warning */
+    warning?: string;
+    /** Message to be displayed when there is an info */
+    info?: string;
+}
+declare const ValidationWrapper: ({ error, warning, info, }: EditorValidationWrapperProps) => React.JSX.Element;
+export default ValidationWrapper;

package/esm/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.component.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StyledValidationWrapper from "./editor-validation-wrapper.style";
+import ValidationIcon from "../../../../__internal__/validations";
+const ValidationWrapper = ({
+  error,
+  warning,
+  info
+}) => /*#__PURE__*/React.createElement(StyledValidationWrapper, {
+  "data-component": "text-editor-validation-wrapper"
+}, /*#__PURE__*/React.createElement(ValidationIcon, {
+  error: error,
+  warning: warning,
+  info: info,
+  tooltipPosition: "top",
+  tabIndex: 0
+}));
+export default ValidationWrapper;

package/esm/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledValidationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledValidationWrapper;

package/esm/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.style.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const StyledValidationWrapper = styled.div`
+  margin: var(--spacing200) var(--spacing200) var(--spacing000)
+    var(--spacing050);
+  min-width: var(--sizing500);
+  height: var(--sizing275);
+  display: flex;
+  float: right;
+  align-items: center;
+`;
+export default StyledValidationWrapper;

package/esm/components/text-editor/__internal__/editor-validation-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./editor-validation-wrapper.component";
+export type { EditorValidationWrapperProps } from "./editor-validation-wrapper.component";

package/esm/components/text-editor/__internal__/editor-validation-wrapper/index.js

@@ -0,0 +1 @@
+export { default } from "./editor-validation-wrapper.component";

package/esm/components/text-editor/text-editor.component.d.ts

@@ -30,6 +30,8 @@ export interface TextEditorProps extends MarginProps {
     previews?: React.ReactNode;
     /** Callback to report a url when a link is added */
     onLinkAdded?: (url: string) => void;
+    /** Hint text to be rendered when validationRedesignOptIn flag is set */
+    inputHint?: string;
 }
 export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<Editor>>;
 export declare const TextEditorState: typeof EditorState;

package/esm/components/text-editor/text-editor.component.js

@@ -1,15 +1,21 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { ContentState, EditorState, RichUtils, getDefaultKeyBinding, Modifier, Editor } from "draft-js";
 import { computeBlockType, getContent, getContentInfo, getDecoratedValue, getSelectedLength, moveSelectionToEnd, resetBlockType, isASCIIChar, replaceText, hasInlineStyle, hasBlockStyle, blockStyleFn } from "./__internal__/utils";
 import { StyledEditorWrapper, StyledEditorOutline, StyledEditorContainer } from "./text-editor.style";
-import Counter from "./__internal__/editor-counter";
+import ValidationWrapper from "./__internal__/editor-validation-wrapper";
 import Toolbar from "./__internal__/toolbar";
 import Label from "../../__internal__/label";
 import Events from "../../__internal__/utils/helpers/events";
-import createGuid from "../../__internal__/utils/helpers/guid";
+import guid from "../../__internal__/utils/helpers/guid";
 import LabelWrapper from "./__internal__/label-wrapper";
 import { BOLD, ITALIC, UNORDERED_LIST, ORDERED_LIST } from "./types";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import Box from "../box";
+import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 const NUMBERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const INLINE_STYLES = [BOLD, ITALIC];
 export const EditorContext = /*#__PURE__*/React.createContext({});
@@ -26,8 +32,12 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   rows,
   previews,
   onLinkAdded,
+  inputHint,
   ...rest
 }, ref) => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const [isFocused, setIsFocused] = useState(false);
   const [inlines, setInlines] = useState([]);
   const [activeInlines, setActiveInlines] = useState({});
@@ -37,7 +47,24 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const contentLength = getContent(value).getPlainText("").length;
   const moveCursor = useRef(contentLength > 0);
   const lastKeyPressed = useRef();
-  const labelId = useRef(`text-editor-label-${createGuid()}`);
+  const inputHintId = useRef(`${guid()}-hint`);
+  const {
+    current: id
+  } = useRef(guid());
+  const {
+    labelId,
+    validationId,
+    ariaDescribedBy
+  } = useInputAccessibility({
+    id,
+    validationRedesignOptIn,
+    error,
+    warning,
+    info,
+    label: labelText
+  });
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(getContent(value).getPlainText(""), characterLimit);
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console
     console.warn(`Prop rows must be a number value that is 2 or greater to override the min-height of the \`${TextEditor.displayName}\``);
@@ -223,9 +250,19 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(StyledEditorWrapper, rest, /*#__PURE__*/React.createElement(LabelWrapper, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/React.createElement(Label, {
-    labelId: labelId.current,
+    labelId: labelId,
     isRequired: required
-  }, labelText)), /*#__PURE__*/React.createElement(StyledEditorOutline, {
+  }, labelText)), inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
+    id: inputHintId.current
+  }, inputHint), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, validationRedesignOptIn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    validationId: validationId,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  })), /*#__PURE__*/React.createElement(StyledEditorOutline, {
     isFocused: isFocused,
     hasError: !!error
   }, /*#__PURE__*/React.createElement(StyledEditorContainer, {
@@ -233,9 +270,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     hasError: !!error,
     rows: rows,
     hasPreview: !!React.Children.count(previews)
-  }, /*#__PURE__*/React.createElement(Counter, {
-    limit: characterLimit,
-    count: contentLength,
+  }, !validationRedesignOptIn && (error || warning || info) && /*#__PURE__*/React.createElement(ValidationWrapper, {
     error: error,
     warning: warning,
     info: info
@@ -248,8 +283,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     handleBeforeInput: handleBeforeInput,
     handlePastedText: handlePastedText,
     handleKeyCommand: handleKeyCommand,
-    ariaLabelledBy: labelId.current,
-    ariaDescribedBy: labelId.current,
+    ariaLabelledBy: labelId,
+    ariaDescribedBy: combinedAriaDescribedBy,
     blockStyleFn: blockStyleFn,
     keyBindingFn: keyBindingFn,
     tabIndex: 0
@@ -270,12 +305,13 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     activeControls: activeControls,
     canFocus: focusToolbar,
     toolbarElements: toolbarElements
-  })))));
+  }))), characterCount)));
 });
 TextEditor.propTypes = {
   "characterLimit": PropTypes.number,
   "error": PropTypes.string,
   "info": PropTypes.string,
+  "inputHint": PropTypes.string,
   "labelText": PropTypes.string.isRequired,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     whiteSpace?: string;
     /** Override the word-wrap */
     wordWrap?: string;
+    /** Override the text-align */
+    textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
     /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
-const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -19,6 +19,7 @@ export const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -43,6 +44,7 @@ export const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,
     color: color,

package/esm/components/typography/typography.style.js

@@ -42,6 +42,7 @@ const getSize = variant => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -73,6 +74,7 @@ const getLineHeight = variant => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -98,6 +100,7 @@ const getWeight = variant => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -149,6 +152,7 @@ const StyledTypography = styled.span.attrs(({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   screenReaderOnly
@@ -163,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
+    text-align: ${textAlign};
     text-overflow: ${truncate ? "ellipsis" : textOverflow};
     ${truncate && css`
       overflow: hidden;

package/lib/__internal__/character-count/character-count.style.js

@@ -13,14 +13,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const StyledCharacterCountWrapper = _styledComponents.default.div``;
 exports.StyledCharacterCountWrapper = StyledCharacterCountWrapper;
 const StyledCharacterCount = _styledComponents.default.div`
-  ::after {
-    content: " ";
-  }
-
   text-align: left;
-  font-size: 12px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  font-size: var(--fontSizes100);
+  margin-top: var(--spacing050);
+  margin-bottom: var(--spacing050);
   color: ${({
   isOverLimit
 }) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
@@ -28,7 +24,7 @@ const StyledCharacterCount = _styledComponents.default.div`
   ${({
   isOverLimit
 }) => isOverLimit && (0, _styledComponents.css)`
-      font-weight: 700;
+      font-weight: var(--fontWeights700);
     `}
 `;
 exports.StyledCharacterCount = StyledCharacterCount;

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

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface EditorValidationWrapperProps {
+    /** Message to be displayed when there is an error */
+    error?: string;
+    /** Message to be displayed when there is a warning */
+    warning?: string;
+    /** Message to be displayed when there is an info */
+    info?: string;
+}
+declare const ValidationWrapper: ({ error, warning, info, }: EditorValidationWrapperProps) => React.JSX.Element;
+export default ValidationWrapper;

package/lib/components/text-editor/__internal__/{editor-counter/editor-counter.component.js → editor-validation-wrapper/editor-validation-wrapper.component.js}

@@ -6,25 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _editorCounter = require("./editor-counter.style");
+var _editorValidationWrapper = _interopRequireDefault(require("./editor-validation-wrapper.style"));
 var _validations = _interopRequireDefault(require("../../../../__internal__/validations"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Counter = ({
-  count = 0,
-  limit = 3000,
+const ValidationWrapper = ({
   error,
   warning,
   info
-}) => /*#__PURE__*/_react.default.createElement(_editorCounter.StyledCounterWrapper, {
-  "data-component": "text-editor-counter"
-}, !!(error || warning || info) && /*#__PURE__*/_react.default.createElement(_validations.default, {
+}) => /*#__PURE__*/_react.default.createElement(_editorValidationWrapper.default, {
+  "data-component": "text-editor-validation-wrapper"
+}, /*#__PURE__*/_react.default.createElement(_validations.default, {
   error: error,
   warning: warning,
   info: info,
   tooltipPosition: "top",
   tabIndex: 0
-}), /*#__PURE__*/_react.default.createElement(_editorCounter.StyledCounter, {
-  hasError: !!error
-}, `${limit - count}`));
-var _default = Counter;
+}));
+var _default = ValidationWrapper;
 exports.default = _default;

package/lib/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledValidationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledValidationWrapper;

package/lib/components/text-editor/__internal__/editor-validation-wrapper/editor-validation-wrapper.style.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledValidationWrapper = _styledComponents.default.div`
+  margin: var(--spacing200) var(--spacing200) var(--spacing000)
+    var(--spacing050);
+  min-width: var(--sizing500);
+  height: var(--sizing275);
+  display: flex;
+  float: right;
+  align-items: center;
+`;
+var _default = StyledValidationWrapper;
+exports.default = _default;

package/lib/components/text-editor/__internal__/editor-validation-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./editor-validation-wrapper.component";
+export type { EditorValidationWrapperProps } from "./editor-validation-wrapper.component";

package/lib/components/text-editor/__internal__/{editor-counter → editor-validation-wrapper}/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _editorCounter.default;
+    return _editorValidationWrapper.default;
   }
 });
-var _editorCounter = _interopRequireDefault(require("./editor-counter.component"));
+var _editorValidationWrapper = _interopRequireDefault(require("./editor-validation-wrapper.component"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/text-editor/__internal__/{editor-counter → editor-validation-wrapper}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../../esm/components/text-editor/__internal__/editor-counter/index.js",
+  "module": "../../../../../esm/components/text-editor/__internal__/editor-validation-wrapper/index.js",
   "main": "./index.js",
   "types": "./index.d.ts"
 }

package/lib/components/text-editor/text-editor.component.d.ts

@@ -30,6 +30,8 @@ export interface TextEditorProps extends MarginProps {
     previews?: React.ReactNode;
     /** Callback to report a url when a link is added */
     onLinkAdded?: (url: string) => void;
+    /** Hint text to be rendered when validationRedesignOptIn flag is set */
+    inputHint?: string;
 }
 export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<Editor>>;
 export declare const TextEditorState: typeof EditorState;

package/lib/components/text-editor/text-editor.component.js

@@ -9,13 +9,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _draftJs = require("draft-js");
 var _utils = require("./__internal__/utils");
 var _textEditor = require("./text-editor.style");
-var _editorCounter = _interopRequireDefault(require("./__internal__/editor-counter"));
+var _editorValidationWrapper = _interopRequireDefault(require("./__internal__/editor-validation-wrapper"));
 var _toolbar = _interopRequireDefault(require("./__internal__/toolbar"));
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _labelWrapper = _interopRequireDefault(require("./__internal__/label-wrapper"));
 var _types = require("./types");
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _textbox = require("../textbox/textbox.style");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+var _box = _interopRequireDefault(require("../box"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -36,8 +42,12 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
   rows,
   previews,
   onLinkAdded,
+  inputHint,
   ...rest
 }, ref) => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [inlines, setInlines] = (0, _react.useState)([]);
   const [activeInlines, setActiveInlines] = (0, _react.useState)({});
@@ -47,7 +57,24 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
   const contentLength = (0, _utils.getContent)(value).getPlainText("").length;
   const moveCursor = (0, _react.useRef)(contentLength > 0);
   const lastKeyPressed = (0, _react.useRef)();
-  const labelId = (0, _react.useRef)(`text-editor-label-${(0, _guid.default)()}`);
+  const inputHintId = (0, _react.useRef)(`${(0, _guid.default)()}-hint`);
+  const {
+    current: id
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    labelId,
+    validationId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    validationRedesignOptIn,
+    error,
+    warning,
+    info,
+    label: labelText
+  });
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)((0, _utils.getContent)(value).getPlainText(""), characterLimit);
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console
     console.warn(`Prop rows must be a number value that is 2 or greater to override the min-height of the \`${TextEditor.displayName}\``);
@@ -233,9 +260,19 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorWrapper, rest, /*#__PURE__*/_react.default.createElement(_labelWrapper.default, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
-    labelId: labelId.current,
+    labelId: labelId,
     isRequired: required
-  }, labelText)), /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorOutline, {
+  }, labelText)), inputHint && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
+    id: inputHintId.current
+  }, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    validationId: validationId,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning)
+  })), /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorOutline, {
     isFocused: isFocused,
     hasError: !!error
   }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorContainer, {
@@ -243,9 +280,7 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
     hasError: !!error,
     rows: rows,
     hasPreview: !!_react.default.Children.count(previews)
-  }, /*#__PURE__*/_react.default.createElement(_editorCounter.default, {
-    limit: characterLimit,
-    count: contentLength,
+  }, !validationRedesignOptIn && (error || warning || info) && /*#__PURE__*/_react.default.createElement(_editorValidationWrapper.default, {
     error: error,
     warning: warning,
     info: info
@@ -258,8 +293,8 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
     handleBeforeInput: handleBeforeInput,
     handlePastedText: handlePastedText,
     handleKeyCommand: handleKeyCommand,
-    ariaLabelledBy: labelId.current,
-    ariaDescribedBy: labelId.current,
+    ariaLabelledBy: labelId,
+    ariaDescribedBy: combinedAriaDescribedBy,
     blockStyleFn: _utils.blockStyleFn,
     keyBindingFn: keyBindingFn,
     tabIndex: 0
@@ -280,13 +315,14 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
     activeControls: activeControls,
     canFocus: focusToolbar,
     toolbarElements: toolbarElements
-  })))));
+  }))), characterCount)));
 });
 exports.TextEditor = TextEditor;
 TextEditor.propTypes = {
   "characterLimit": _propTypes.default.number,
   "error": _propTypes.default.string,
   "info": _propTypes.default.string,
+  "inputHint": _propTypes.default.string,
   "labelText": _propTypes.default.string.isRequired,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     whiteSpace?: string;
     /** Override the word-wrap */
     wordWrap?: string;
+    /** Override the text-align */
+    textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
     /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -11,7 +11,7 @@ var _utils = require("../../style/utils");
 var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -26,6 +26,7 @@ const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -50,6 +51,7 @@ const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,
     color: color,

package/lib/components/typography/typography.style.js

@@ -51,6 +51,7 @@ const getSize = variant => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -82,6 +83,7 @@ const getLineHeight = variant => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -107,6 +109,7 @@ const getWeight = variant => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -158,6 +161,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   screenReaderOnly
@@ -172,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
+    text-align: ${textAlign};
     text-overflow: ${truncate ? "ellipsis" : textOverflow};
     ${truncate && (0, _styledComponents.css)`
       overflow: hidden;

package/package.json

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

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-export interface EditorCounterProps {
-    /** Sets the current count value */
-    count?: number;
-    /** Sets the current limit value */
-    limit?: number;
-    /** Message to be displayed when there is an error */
-    error?: string;
-    /** Message to be displayed when there is a warning */
-    warning?: string;
-    /** Message to be displayed when there is an info */
-    info?: string;
-}
-declare const Counter: ({ count, limit, error, warning, info, }: EditorCounterProps) => React.JSX.Element;
-export default Counter;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.js

@@ -1,22 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { StyledCounterWrapper, StyledCounter } from "./editor-counter.style";
-import ValidationIcon from "../../../../__internal__/validations";
-const Counter = ({
-  count = 0,
-  limit = 3000,
-  error,
-  warning,
-  info
-}) => /*#__PURE__*/React.createElement(StyledCounterWrapper, {
-  "data-component": "text-editor-counter"
-}, !!(error || warning || info) && /*#__PURE__*/React.createElement(ValidationIcon, {
-  error: error,
-  warning: warning,
-  info: info,
-  tooltipPosition: "top",
-  tabIndex: 0
-}), /*#__PURE__*/React.createElement(StyledCounter, {
-  hasError: !!error
-}, `${limit - count}`));
-export default Counter;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.style.d.ts

@@ -1,5 +0,0 @@
-declare const StyledCounter: import("styled-components").StyledComponent<"span", any, {
-    hasError: boolean;
-}, never>;
-declare const StyledCounterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledCounter, StyledCounterWrapper };

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.style.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-const StyledCounter = styled.span`
-  color: ${({
-  hasError
-}) => hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
-  width: 100%;
-`;
-const StyledCounterWrapper = styled.div`
-  margin: 16px 16px 0px 4px;
-  min-width: 40px;
-  height: 21px;
-  font-size: 14px;
-  display: flex;
-  float: right;
-  text-align: right;
-  align-items: center;
-`;
-export { StyledCounter, StyledCounterWrapper };

package/esm/components/text-editor/__internal__/editor-counter/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./editor-counter.component";
-export type { EditorCounterProps } from "./editor-counter.component";

package/esm/components/text-editor/__internal__/editor-counter/index.js

@@ -1 +0,0 @@
-export { default } from "./editor-counter.component";

package/lib/components/text-editor/__internal__/editor-counter/editor-counter.component.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-export interface EditorCounterProps {
-    /** Sets the current count value */
-    count?: number;
-    /** Sets the current limit value */
-    limit?: number;
-    /** Message to be displayed when there is an error */
-    error?: string;
-    /** Message to be displayed when there is a warning */
-    warning?: string;
-    /** Message to be displayed when there is an info */
-    info?: string;
-}
-declare const Counter: ({ count, limit, error, warning, info, }: EditorCounterProps) => React.JSX.Element;
-export default Counter;

package/lib/components/text-editor/__internal__/editor-counter/editor-counter.style.d.ts

@@ -1,5 +0,0 @@
-declare const StyledCounter: import("styled-components").StyledComponent<"span", any, {
-    hasError: boolean;
-}, never>;
-declare const StyledCounterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledCounter, StyledCounterWrapper };

package/lib/components/text-editor/__internal__/editor-counter/editor-counter.style.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledCounterWrapper = exports.StyledCounter = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledCounter = _styledComponents.default.span`
-  color: ${({
-  hasError
-}) => hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
-  width: 100%;
-`;
-exports.StyledCounter = StyledCounter;
-const StyledCounterWrapper = _styledComponents.default.div`
-  margin: 16px 16px 0px 4px;
-  min-width: 40px;
-  height: 21px;
-  font-size: 14px;
-  display: flex;
-  float: right;
-  text-align: right;
-  align-items: center;
-`;
-exports.StyledCounterWrapper = StyledCounterWrapper;

package/lib/components/text-editor/__internal__/editor-counter/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./editor-counter.component";
-export type { EditorCounterProps } from "./editor-counter.component";