carbon-react 120.6.0 → 121.0.0

package/esm/__internal__/character-count/character-count.component.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 interface CharacterCountProps {
     value: number;
+    debouncedValue?: number;
     limit: number;
+    isDebouncedOverLimit?: boolean;
     isOverLimit: boolean;
-    "data-element"?: string;
+    visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, limit, isOverLimit, "data-element": dataElement, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

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

@@ -1,21 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
-import StyledCharacterCount from "./character-count.style";
+import { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint } from "./character-count.style";
 import useLocale from "../../hooks/__internal__/useLocale";
 const CharacterCount = ({
   value,
+  debouncedValue = value,
   limit,
+  isDebouncedOverLimit,
   isOverLimit,
-  "data-element": dataElement
+  visuallyHiddenHintId
 }) => {
   const limitMinusValue = +limit - +value;
   const valueMinusLimit = +value - +limit;
+  const debouncedLimitMinusValue = +limit - +debouncedValue;
+  const debouncedValueMinusLimit = debouncedValue - +limit;
   const l = useLocale();
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
-  return /*#__PURE__*/React.createElement(StyledCharacterCount, {
-    "aria-live": "polite",
+  return /*#__PURE__*/React.createElement(StyledCharacterCountWrapper, null, /*#__PURE__*/React.createElement(VisuallyHiddenHint, {
+    "data-element": "visually-hidden-hint",
+    id: visuallyHiddenHintId
+  }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/React.createElement(StyledCharacterCount, {
+    "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": dataElement
-  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale())));
+    "data-element": "character-count"
+  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCount, {
+    "data-element": "visually-hidden-character-count",
+    "aria-live": "polite"
+  }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 export default CharacterCount;

package/esm/__internal__/character-count/character-count.style.d.ts

@@ -1,4 +1,7 @@
+declare const StyledCharacterCountWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCharacterCount: import("styled-components").StyledComponent<"div", any, {
     isOverLimit: boolean;
 }, never>;
-export default StyledCharacterCount;
+declare const VisuallyHiddenCharacterCount: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const VisuallyHiddenHint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint, };

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

@@ -1,7 +1,13 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
+import visuallyHidden from "../../style/utils/visually-hidden";
+const StyledCharacterCountWrapper = styled.div``;
 const StyledCharacterCount = styled.div`
-  text-align: right;
+  ::after {
+    content: " ";
+  }
+
+  text-align: left;
   font-size: 12px;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -15,7 +21,25 @@ const StyledCharacterCount = styled.div`
       font-weight: 700;
     `}
 `;
+const VisuallyHiddenCharacterCount = styled.div`
+  ::after {
+    content: " ";
+  }
+
+  ${visuallyHidden}
+`;
+const VisuallyHiddenHint = styled.div`
+  ::before {
+    content: " ";
+  }
+
+  ::after {
+    content: " ";
+  }
+
+  ${visuallyHidden}
+`;
 StyledCharacterCount.defaultProps = {
   theme: baseTheme
 };
-export default StyledCharacterCount;
+export { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint };

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

@@ -12,7 +12,7 @@ export interface DateChangeEvent {
         };
     };
 }
-export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "enforceCharacterLimit" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon"> {
+export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon"> {
     /** Boolean to allow the input to have an empty value */
     allowEmptyValue?: boolean;
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */

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

@@ -203,7 +203,6 @@ GroupedCharacter.propTypes = {
   "dir": PropTypes.string,
   "disabled": PropTypes.bool,
   "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
-  "enforceCharacterLimit": PropTypes.bool,
   "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "fieldHelp": PropTypes.node,

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -82,11 +82,6 @@ const StyledButtonChildrenContainer = styled.div`
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
 
-    ${StyledIcon} {
-      margin-left: 0;
-      left: 8px;
-    }
-
     ${borderRadiusStyling}
 
     ${StyledButton} {

package/esm/components/number/number.component.js

@@ -135,7 +135,6 @@ Number.propTypes = {
   "dir": PropTypes.string,
   "disabled": PropTypes.bool,
   "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
-  "enforceCharacterLimit": PropTypes.bool,
   "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "fieldHelp": PropTypes.node,

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

@@ -26,8 +26,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     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 */

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

@@ -28,7 +28,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   size,
   children,
   characterLimit,
-  enforceCharacterLimit = true,
   onChange,
   disabled = false,
   labelInline,
@@ -119,7 +118,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount, characterCountHintId, characterCountHint] = useCharacterCount(value, characterLimit, enforceCharacterLimit);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit);
   useEffect(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -147,10 +146,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   }, [expandable]);
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = useRef(guid());
-  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
-  const inputHintIdValue = inputHint ? hintId.current : undefined;
-  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
-  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const inputHintId = inputHint ? hintId.current : undefined;
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
@@ -168,7 +165,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     name: name,
     value: value,
     ref: callbackRef,
-    maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
@@ -219,10 +215,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, characterLimit || inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
-    id: hintIdValue,
+  }, inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+    id: inputHintId,
     "data-element": "input-hint"
-  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
@@ -317,7 +313,6 @@ Textarea.propTypes = {
   "dir": PropTypes.string,
   "disabled": PropTypes.bool,
   "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
-  "enforceCharacterLimit": PropTypes.bool,
   "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "expandable": PropTypes.bool,

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

@@ -94,8 +94,6 @@ export interface TextboxProps extends CommonTextboxProps {
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */
     characterLimit?: number;
-    /** Stop the user typing over the characterLimit */
-    enforceCharacterLimit?: boolean;
 }
 export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

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

@@ -70,13 +70,13 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
-  enforceCharacterLimit = true,
   characterLimit,
   helpAriaLabel,
   ...props
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount, characterCountHintId, characterCountHint] = useCharacterCount(characterCountValue, characterLimit, enforceCharacterLimit);
+  const [uniqueId, uniqueName] = useUniqueId(id, name);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -84,7 +84,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     disableErrorBorder
   } = useContext(NumeralDateContext);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  const [uniqueId, uniqueName] = useUniqueId(id, name);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -108,10 +107,8 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     fieldHelp
   });
   const hintId = useRef(guid());
-  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
-  const inputHintIdValue = inputHint ? hintId.current : undefined;
-  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
-  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const inputHintId = inputHint ? hintId.current : undefined;
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
@@ -152,7 +149,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,
     value: typeof formattedValue === "string" ? formattedValue : value,
-    maxLength: maxLength,
     validationIconId: validationRedesignOptIn ? undefined : validationId
   }, props)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     align: align,
@@ -197,10 +193,10 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), characterLimit || inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
-    id: hintIdValue,
+  }, filterStyledSystemMarginProps(props)), inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+    id: inputHintId,
     "data-element": "input-hint"
-  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
@@ -295,7 +291,6 @@ Textbox.propTypes = {
   "dir": PropTypes.string,
   "disabled": PropTypes.bool,
   "draggable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
-  "enforceCharacterLimit": PropTypes.bool,
   "enterKeyHint": PropTypes.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "fieldHelp": PropTypes.node,

package/esm/components/textbox/textbox.style.js

@@ -14,6 +14,10 @@ const ErrorBorder = styled.span`
     `}
 `;
 const StyledInputHint = styled.p`
+  ::after {
+    content: " ";
+  }
+
   display: block;
   flex: 1;
   margin-top: -3px;

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
-declare const useCharacterCount: (value?: string, characterLimit?: number, enforceCharacterLimit?: boolean) => [
-    number | undefined,
-    JSX.Element | null,
-    string | undefined,
-    string | null
-];
+declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -1,11 +1,19 @@
-import React, { useMemo, useRef } from "react";
+import React, { useMemo, useRef, useEffect, useState } from "react";
 import CharacterCount from "../../../__internal__/character-count";
-import useLocale from "../useLocale";
 import guid from "../../../__internal__/utils/helpers/guid";
-const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = true) => {
+import useDebounce from "../useDebounce";
+const useCharacterCount = (value = "", characterLimit) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
-  const l = useLocale();
-  const hintString = l.characterCount.hintString();
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const debounceWaitTime = 2000;
+  const updateDebouncedValue = useDebounce(newValue => {
+    setDebouncedValue(newValue);
+  }, debounceWaitTime);
+  useEffect(() => {
+    if (characterLimit) {
+      updateDebouncedValue(value);
+    }
+  }, [value, characterLimit, updateDebouncedValue]);
   const hintId = useRef(guid());
   const isOverLimit = useMemo(() => {
     if (value && isCharacterLimitValid) {
@@ -13,11 +21,19 @@ const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = t
     }
     return false;
   }, [value, characterLimit, isCharacterLimitValid]);
-  return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
+  const isDebouncedOverLimit = useMemo(() => {
+    if (debouncedValue && isCharacterLimitValid) {
+      return debouncedValue.length > characterLimit;
+    }
+    return false;
+  }, [debouncedValue, characterLimit, isCharacterLimitValid]);
+  return [isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
     isOverLimit: isOverLimit,
+    isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,
+    debouncedValue: debouncedValue.length,
     limit: characterLimit,
-    "data-element": "character-limit"
-  }) : null, hintId.current, isCharacterLimitValid ? hintString : null];
+    visuallyHiddenHintId: hintId.current
+  }) : null, isCharacterLimitValid ? hintId.current : undefined];
 };
 export default useCharacterCount;

package/esm/hooks/__internal__/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useDebounce";

package/esm/hooks/__internal__/useDebounce/index.js

@@ -0,0 +1 @@
+export { default } from "./useDebounce";

package/esm/hooks/__internal__/useDebounce/useDebounce.d.ts

@@ -0,0 +1,4 @@
+import { DebouncedFunc } from "lodash";
+declare type Callback = (...args: any[]) => void;
+declare const useDebounce: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
+export default useDebounce;

package/esm/hooks/__internal__/useDebounce/useDebounce.js

@@ -0,0 +1,19 @@
+import { useMemo, useEffect, useRef } from "react";
+import debounce from "lodash/debounce";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const useDebounce = (callback, delay) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  const debouncedCallback = useMemo(() => debounce(callbackRef.current, delay), [delay]);
+  useEffect(() => {
+    return () => {
+      debouncedCallback.cancel();
+    };
+  });
+  return debouncedCallback;
+};
+export default useDebounce;

package/esm/locales/en-gb.js

@@ -25,9 +25,9 @@ const enGB = {
     yes: () => "Yes"
   },
   characterCount: {
-    hintString: () => "Input contains a character counter",
-    tooManyCharacters: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character too many` : `You have ${formattedCount} characters too many`,
-    charactersLeft: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character remaining` : `You have ${formattedCount} characters remaining`
+    tooManyCharacters: (count, formattedCount) => count === 1 ? `${formattedCount} character too many` : `${formattedCount} characters too many`,
+    charactersLeft: (count, formattedCount) => count === 1 ? `${formattedCount} character left` : `${formattedCount} characters left`,
+    visuallyHiddenHint: formattedCount => `You can enter up to ${formattedCount} characters`
   },
   date: {
     dateFnsLocale: () => enGBDateLocale

package/esm/locales/locale.d.ts

@@ -20,9 +20,9 @@ interface Locale {
         ariaLabel: () => string;
     };
     characterCount: {
-        hintString: () => string;
         tooManyCharacters: (count: number, formattedCount: string) => string;
         charactersLeft: (count: number, formattedCount: string) => string;
+        visuallyHiddenHint: (formattedCount: string) => string;
     };
     confirm: {
         no: () => string;

package/esm/locales/pl-pl.js

@@ -62,9 +62,9 @@ const plPL = {
     yes: () => "Tak"
   },
   characterCount: {
-    hintString: () => "Pole zawiera licznik znaków",
     tooManyCharacters: (count, formattedCount) => `Masz o ${formattedCount} ${PolishPlural("znak", "znaki", "znaków", count)} za dużo`,
-    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`
+    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`,
+    visuallyHiddenHint: formattedCount => `Można wprowadzić do ${formattedCount} znaków`
   },
   date: {
     dateFnsLocale: () => plDateLocale

package/lib/__internal__/character-count/character-count.component.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 interface CharacterCountProps {
     value: number;
+    debouncedValue?: number;
     limit: number;
+    isDebouncedOverLimit?: boolean;
     isOverLimit: boolean;
-    "data-element"?: string;
+    visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, limit, isOverLimit, "data-element": dataElement, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

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

@@ -6,24 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _characterCount = _interopRequireDefault(require("./character-count.style"));
+var _characterCount = require("./character-count.style");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CharacterCount = ({
   value,
+  debouncedValue = value,
   limit,
+  isDebouncedOverLimit,
   isOverLimit,
-  "data-element": dataElement
+  visuallyHiddenHintId
 }) => {
   const limitMinusValue = +limit - +value;
   const valueMinusLimit = +value - +limit;
+  const debouncedLimitMinusValue = +limit - +debouncedValue;
+  const debouncedValueMinusLimit = debouncedValue - +limit;
   const l = (0, _useLocale.default)();
   const getFormatNumber = (rawValue, locale) => new Intl.NumberFormat(locale).format(rawValue);
-  return /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-    "aria-live": "polite",
+  return /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCountWrapper, null, /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenHint, {
+    "data-element": "visually-hidden-hint",
+    id: visuallyHiddenHintId
+  }, l.characterCount.visuallyHiddenHint(getFormatNumber(limit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.StyledCharacterCount, {
+    "aria-hidden": "true",
     isOverLimit: isOverLimit,
-    "data-element": dataElement
-  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale())));
+    "data-element": "character-count"
+  }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenCharacterCount, {
+    "data-element": "visually-hidden-character-count",
+    "aria-live": "polite"
+  }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 var _default = CharacterCount;
 exports.default = _default;

package/lib/__internal__/character-count/character-count.style.d.ts

@@ -1,4 +1,7 @@
+declare const StyledCharacterCountWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCharacterCount: import("styled-components").StyledComponent<"div", any, {
     isOverLimit: boolean;
 }, never>;
-export default StyledCharacterCount;
+declare const VisuallyHiddenCharacterCount: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const VisuallyHiddenHint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint, };

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

@@ -3,14 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VisuallyHiddenHint = exports.VisuallyHiddenCharacterCount = exports.StyledCharacterCountWrapper = exports.StyledCharacterCount = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
 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; }
+const StyledCharacterCountWrapper = _styledComponents.default.div``;
+exports.StyledCharacterCountWrapper = StyledCharacterCountWrapper;
 const StyledCharacterCount = _styledComponents.default.div`
-  text-align: right;
+  ::after {
+    content: " ";
+  }
+
+  text-align: left;
   font-size: 12px;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -24,8 +31,27 @@ const StyledCharacterCount = _styledComponents.default.div`
       font-weight: 700;
     `}
 `;
+exports.StyledCharacterCount = StyledCharacterCount;
+const VisuallyHiddenCharacterCount = _styledComponents.default.div`
+  ::after {
+    content: " ";
+  }
+
+  ${_visuallyHidden.default}
+`;
+exports.VisuallyHiddenCharacterCount = VisuallyHiddenCharacterCount;
+const VisuallyHiddenHint = _styledComponents.default.div`
+  ::before {
+    content: " ";
+  }
+
+  ::after {
+    content: " ";
+  }
+
+  ${_visuallyHidden.default}
+`;
+exports.VisuallyHiddenHint = VisuallyHiddenHint;
 StyledCharacterCount.defaultProps = {
   theme: _base.default
-};
-var _default = StyledCharacterCount;
-exports.default = _default;
+};

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

@@ -12,7 +12,7 @@ export interface DateChangeEvent {
         };
     };
 }
-export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "enforceCharacterLimit" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon"> {
+export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedValue" | "rawValue" | "onChange" | "onBlur" | "onMouseDown" | "onChangeDeferred" | "deferTimeout" | "children" | "leftChildren" | "placeholder" | "iconOnClick" | "iconOnMouseDown" | "characterLimit" | "warnOverLimit" | "iconTabIndex" | "inputIcon"> {
     /** Boolean to allow the input to have an empty value */
     allowEmptyValue?: boolean;
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */

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

@@ -213,7 +213,6 @@ GroupedCharacter.propTypes = {
   "dir": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
   "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
-  "enforceCharacterLimit": _propTypes.default.bool,
   "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "fieldHelp": _propTypes.default.node,

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -92,11 +92,6 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
 
-    ${_icon.default} {
-      margin-left: 0;
-      left: 8px;
-    }
-
     ${_splitButtonChildren.borderRadiusStyling}
 
     ${_button.default} {

package/lib/components/number/number.component.js

@@ -145,7 +145,6 @@ Number.propTypes = {
   "dir": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
   "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
-  "enforceCharacterLimit": _propTypes.default.bool,
   "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "fieldHelp": _propTypes.default.node,

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

@@ -26,8 +26,6 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     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 */

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

@@ -37,7 +37,6 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   size,
   children,
   characterLimit,
-  enforceCharacterLimit = true,
   onChange,
   disabled = false,
   labelInline,
@@ -128,7 +127,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount, characterCountHintId, characterCountHint] = (0, _useCharacterCount.default)(value, characterLimit, enforceCharacterLimit);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit);
   (0, _react.useEffect)(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -156,10 +155,8 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   }, [expandable]);
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = (0, _react.useRef)((0, _guid.default)());
-  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
-  const inputHintIdValue = inputHint ? hintId.current : undefined;
-  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
-  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const inputHintId = inputHint ? hintId.current : undefined;
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     size: size,
     disabled: disabled,
@@ -177,7 +174,6 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     name: name,
     value: value,
     ref: callbackRef,
-    maxLength: maxLength,
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
@@ -228,10 +224,10 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, characterLimit || inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
-    id: hintIdValue,
+  }, inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+    id: inputHintId,
     "data-element": "input-hint"
-  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint) : null, 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,
@@ -327,7 +323,6 @@ Textarea.propTypes = {
   "dir": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
   "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
-  "enforceCharacterLimit": _propTypes.default.bool,
   "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "expandable": _propTypes.default.bool,

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

@@ -94,8 +94,6 @@ export interface TextboxProps extends CommonTextboxProps {
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */
     characterLimit?: number;
-    /** Stop the user typing over the characterLimit */
-    enforceCharacterLimit?: boolean;
 }
 export declare const Textbox: React.ForwardRefExoticComponent<TextboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Textbox;

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

@@ -79,13 +79,13 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "data-component": dataComponent,
   "data-element": dataElement,
   "data-role": dataRole,
-  enforceCharacterLimit = true,
   characterLimit,
   helpAriaLabel,
   ...props
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount, characterCountHintId, characterCountHint] = (0, _useCharacterCount.default)(characterCountValue, characterLimit, enforceCharacterLimit);
+  const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(characterCountValue, characterLimit);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -93,7 +93,6 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     disableErrorBorder
   } = (0, _react.useContext)(_numeralDateContext.default);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
@@ -117,10 +116,8 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     fieldHelp
   });
   const hintId = (0, _react.useRef)((0, _guid.default)());
-  const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
-  const inputHintIdValue = inputHint ? hintId.current : undefined;
-  const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
-  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const inputHintId = inputHint ? hintId.current : undefined;
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
@@ -161,7 +158,6 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,
     value: typeof formattedValue === "string" ? formattedValue : value,
-    maxLength: maxLength,
     validationIconId: validationRedesignOptIn ? undefined : validationId
   }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     align: align,
@@ -206,10 +202,10 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), characterLimit || inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
-    id: hintIdValue,
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+    id: inputHintId,
     "data-element": "input-hint"
-  }, characterCountHint || inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint) : null, 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,
@@ -305,7 +301,6 @@ Textbox.propTypes = {
   "dir": _propTypes.default.string,
   "disabled": _propTypes.default.bool,
   "draggable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
-  "enforceCharacterLimit": _propTypes.default.bool,
   "enterKeyHint": _propTypes.default.oneOf(["done", "enter", "go", "next", "previous", "search", "send"]),
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "fieldHelp": _propTypes.default.node,

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

@@ -23,6 +23,10 @@ const ErrorBorder = _styledComponents.default.span`
 `;
 exports.ErrorBorder = ErrorBorder;
 const StyledInputHint = _styledComponents.default.p`
+  ::after {
+    content: " ";
+  }
+
   display: block;
   flex: 1;
   margin-top: -3px;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
-declare const useCharacterCount: (value?: string, characterLimit?: number, enforceCharacterLimit?: boolean) => [
-    number | undefined,
-    JSX.Element | null,
-    string | undefined,
-    string | null
-];
+declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -6,15 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
-var _useLocale = _interopRequireDefault(require("../useLocale"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useDebounce = _interopRequireDefault(require("../useDebounce"));
 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; }
-const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = true) => {
+const useCharacterCount = (value = "", characterLimit) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
-  const l = (0, _useLocale.default)();
-  const hintString = l.characterCount.hintString();
+  const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
+  const debounceWaitTime = 2000;
+  const updateDebouncedValue = (0, _useDebounce.default)(newValue => {
+    setDebouncedValue(newValue);
+  }, debounceWaitTime);
+  (0, _react.useEffect)(() => {
+    if (characterLimit) {
+      updateDebouncedValue(value);
+    }
+  }, [value, characterLimit, updateDebouncedValue]);
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const isOverLimit = (0, _react.useMemo)(() => {
     if (value && isCharacterLimitValid) {
@@ -22,12 +30,20 @@ const useCharacterCount = (value = "", characterLimit, enforceCharacterLimit = t
     }
     return false;
   }, [value, characterLimit, isCharacterLimitValid]);
-  return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+  const isDebouncedOverLimit = (0, _react.useMemo)(() => {
+    if (debouncedValue && isCharacterLimitValid) {
+      return debouncedValue.length > characterLimit;
+    }
+    return false;
+  }, [debouncedValue, characterLimit, isCharacterLimitValid]);
+  return [isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
     isOverLimit: isOverLimit,
+    isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,
+    debouncedValue: debouncedValue.length,
     limit: characterLimit,
-    "data-element": "character-limit"
-  }) : null, hintId.current, isCharacterLimitValid ? hintString : null];
+    visuallyHiddenHintId: hintId.current
+  }) : null, isCharacterLimitValid ? hintId.current : undefined];
 };
 var _default = useCharacterCount;
 exports.default = _default;

package/lib/hooks/__internal__/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useDebounce";

package/lib/hooks/__internal__/useDebounce/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useDebounce.default;
+  }
+});
+var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useDebounce/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useDebounce/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useDebounce/useDebounce.d.ts

@@ -0,0 +1,4 @@
+import { DebouncedFunc } from "lodash";
+declare type Callback = (...args: any[]) => void;
+declare const useDebounce: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
+export default useDebounce;

package/lib/hooks/__internal__/useDebounce/useDebounce.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const useDebounce = (callback, delay) => {
+  const callbackRef = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(() => {
+    callbackRef.current = callback;
+  });
+  const debouncedCallback = (0, _react.useMemo)(() => (0, _debounce.default)(callbackRef.current, delay), [delay]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      debouncedCallback.cancel();
+    };
+  });
+  return debouncedCallback;
+};
+var _default = useDebounce;
+exports.default = _default;

package/lib/locales/en-gb.js

@@ -31,9 +31,9 @@ const enGB = {
     yes: () => "Yes"
   },
   characterCount: {
-    hintString: () => "Input contains a character counter",
-    tooManyCharacters: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character too many` : `You have ${formattedCount} characters too many`,
-    charactersLeft: (count, formattedCount) => count === 1 ? `You have ${formattedCount} character remaining` : `You have ${formattedCount} characters remaining`
+    tooManyCharacters: (count, formattedCount) => count === 1 ? `${formattedCount} character too many` : `${formattedCount} characters too many`,
+    charactersLeft: (count, formattedCount) => count === 1 ? `${formattedCount} character left` : `${formattedCount} characters left`,
+    visuallyHiddenHint: formattedCount => `You can enter up to ${formattedCount} characters`
   },
   date: {
     dateFnsLocale: () => _dateFnsLocales.enGB

package/lib/locales/locale.d.ts

@@ -20,9 +20,9 @@ interface Locale {
         ariaLabel: () => string;
     };
     characterCount: {
-        hintString: () => string;
         tooManyCharacters: (count: number, formattedCount: string) => string;
         charactersLeft: (count: number, formattedCount: string) => string;
+        visuallyHiddenHint: (formattedCount: string) => string;
     };
     confirm: {
         no: () => string;

package/lib/locales/pl-pl.js

@@ -69,9 +69,9 @@ const plPL = {
     yes: () => "Tak"
   },
   characterCount: {
-    hintString: () => "Pole zawiera licznik znaków",
     tooManyCharacters: (count, formattedCount) => `Masz o ${formattedCount} ${PolishPlural("znak", "znaki", "znaków", count)} za dużo`,
-    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`
+    charactersLeft: (count, formattedCount) => `Masz ${formattedCount} ${PolishPlural("pozostały", "pozostałe", "pozostałych", count)} ${PolishPlural("znak", "znaki", "znaków", count)}`,
+    visuallyHiddenHint: formattedCount => `Można wprowadzić do ${formattedCount} znaków`
   },
   date: {
     dateFnsLocale: () => _dateFnsLocales.pl

package/package.json

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