carbon-react 123.0.0 → 123.1.0

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -110,6 +110,8 @@ export const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   useEffect(() => {
     if (focusItem) {
       ref.current?.focus();

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useCallback, useMemo, useContext, useState } from "react";
+import React, { useCallback, useMemo, useContext, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
@@ -32,7 +32,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
-      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
+      return child.type.displayName !== ActionPopoverItem.displayName && child.type.displayName !== ActionPopoverDivider.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -42,42 +42,82 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
     });
   }, [children]);
+  const isItemDisabled = useCallback(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/React.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  useEffect(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (Events.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (Events.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      React.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/React.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/React.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -92,7 +132,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = useState(false);
   const [childHasIcon, setChildHasIcon] = useState(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);

package/esm/components/action-popover/action-popover.component.js

@@ -118,8 +118,8 @@ export const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

package/esm/components/action-popover/action-popover.style.js

@@ -131,6 +131,14 @@ const StyledMenuItem = styled.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/esm/components/carousel/carousel.component.js

@@ -1,9 +1,11 @@
 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); }
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
+import Logger from "../../__internal__/utils/logger";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
 import guid from "../../__internal__/utils/helpers/guid";
+let deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 export const Carousel = ({
@@ -17,6 +19,10 @@ export const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
   const lastSlideIndexProp = useRef(slideIndex);

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

@@ -59,7 +59,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** Text applied to label help tooltip */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true, label is placed in line an input */
     labelInline?: boolean;

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

@@ -12,7 +12,7 @@ import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
-import { ErrorBorder, StyledHintText, StyledInputHint } from "../textbox/textbox.style";
+import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
@@ -215,10 +215,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

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

@@ -52,7 +52,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** A message that the Help component will display */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true label is inline */
     labelInline?: boolean;

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

@@ -11,7 +11,7 @@ import StyledPrefix from "./__internal__/prefix.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-import { ErrorBorder, StyledInputHint, StyledHintText } from "./textbox.style";
+import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
@@ -193,10 +193,10 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(props)), inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
+  }, filterStyledSystemMarginProps(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,

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

@@ -2,6 +2,5 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
     warning: boolean;
     inline?: boolean | undefined;
 }, never>;
-declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledHintText, ErrorBorder, StyledInputHint };
+export { StyledHintText, ErrorBorder };

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

@@ -13,22 +13,14 @@ const ErrorBorder = styled.span`
       top: 0px;
     `}
 `;
-const StyledInputHint = styled.p`
+const StyledHintText = styled.div`
   ::after {
     content: " ";
   }
 
-  display: block;
-  flex: 1;
-  margin-top: -3px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  white-space: pre-wrap;
-`;
-const StyledHintText = styled.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);
   font-size: 14px;
 `;
-export { StyledHintText, ErrorBorder, StyledInputHint };
+export { StyledHintText, ErrorBorder };

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -119,6 +119,8 @@ const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   (0, _react.useEffect)(() => {
     if (focusItem) {
       ref.current?.focus();

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -41,7 +41,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
         return true;
       }
-      return child.type !== _actionPopoverItem.default && child.type !== _actionPopoverDivider.default;
+      return child.type.displayName !== _actionPopoverItem.default.displayName && child.type.displayName !== _actionPopoverDivider.default.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -51,42 +51,82 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
     });
   }, [children]);
+  const isItemDisabled = (0, _react.useCallback)(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/_react.default.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  (0, _react.useEffect)(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = (0, _react.useCallback)(e => {
     if (_events.default.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (_events.default.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (_events.default.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      _react.default.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/_react.default.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/_react.default.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -101,7 +141,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = (0, _react.useState)(false);
   const [childHasIcon, setChildHasIcon] = (0, _react.useState)(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = (0, _react.useState)(submenuPosition);

package/lib/components/action-popover/action-popover.component.js

@@ -127,8 +127,8 @@ const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

package/lib/components/action-popover/action-popover.style.js

@@ -143,6 +143,14 @@ const StyledMenuItem = _styledComponents.default.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/lib/components/carousel/carousel.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Carousel = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _carousel = require("./carousel.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -13,6 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 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); }
+let deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 const Carousel = ({
@@ -26,6 +28,10 @@ const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    _logger.default.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
   const lastSlideIndexProp = (0, _react.useRef)(slideIndex);

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

@@ -59,7 +59,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** Text applied to label help tooltip */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true, label is placed in line an input */
     labelInline?: boolean;

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

@@ -224,10 +224,10 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
-  }, inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+  }, (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,

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

@@ -52,7 +52,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     label?: string;
     /** Inline label alignment */
     labelAlign?: "left" | "right";
-    /** A message that the Help component will display */
+    /** [Legacy] Text applied to label help tooltip. When opted into new design validations
+     * it will render as a hint above the input, unless an `inputHint`
+     * prop is also passed
+     */
     labelHelp?: React.ReactNode;
     /** When true label is inline */
     labelInline?: boolean;

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

@@ -202,10 +202,10 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), (inputHint || labelHelp && validationRedesignOptIn) && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
     id: inputHintId,
     "data-element": "input-hint"
-  }, inputHint) : null, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, inputHint || labelHelp), validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,

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

@@ -2,6 +2,5 @@ declare const ErrorBorder: import("styled-components").StyledComponent<"span", a
     warning: boolean;
     inline?: boolean | undefined;
 }, never>;
-declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledHintText, ErrorBorder, StyledInputHint };
+export { StyledHintText, ErrorBorder };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledInputHint = exports.StyledHintText = exports.ErrorBorder = void 0;
+exports.StyledHintText = exports.ErrorBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
@@ -22,20 +22,11 @@ const ErrorBorder = _styledComponents.default.span`
     `}
 `;
 exports.ErrorBorder = ErrorBorder;
-const StyledInputHint = _styledComponents.default.p`
+const StyledHintText = _styledComponents.default.div`
   ::after {
     content: " ";
   }
 
-  display: block;
-  flex: 1;
-  margin-top: -3px;
-  margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
-  white-space: pre-wrap;
-`;
-exports.StyledInputHint = StyledInputHint;
-const StyledHintText = _styledComponents.default.div`
   margin-top: 0px;
   margin-bottom: 8px;
   color: var(--colorsUtilityYin055);

package/package.json

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