carbon-react 144.9.10 → 144.10.0

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

@@ -34,6 +34,10 @@ export interface FieldsetProps extends MarginProps {
     name?: string;
     /** Set an id value on the component */
     id?: string;
+    /** Content for the Help tooltip */
+    labelHelp?: React.ReactNode;
+    /** Id for the validation icon tooltip */
+    validationId?: string;
 }
-declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, ...rest }: FieldsetProps) => React.JSX.Element;
+declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: FieldsetProps) => React.JSX.Element;
 export default Fieldset;

package/esm/__internal__/fieldset/fieldset.component.js

@@ -1,11 +1,12 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { StyledFieldset, StyledLegend, StyledLegendContent } from "./fieldset.style";
+import { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import Help from "../../components/help";
 const Fieldset = ({
   legend,
   children,
@@ -21,6 +22,8 @@ const Fieldset = ({
   legendMargin = {},
   isDisabled,
   isOptional,
+  labelHelp,
+  validationId,
   ...rest
 }) => {
   const {
@@ -28,6 +31,7 @@ const Fieldset = ({
   } = useContext(NewValidationContext);
   const marginProps = useFormSpacing(rest);
   const [ref, setRef] = useState(null);
+  const [isFocused, setFocus] = useState(false);
   useEffect(() => {
     if (ref && isRequired) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -35,6 +39,27 @@ const Fieldset = ({
       });
     }
   }, [ref, isRequired]);
+  const tooltipIcon = () => {
+    if (error || warning || info) {
+      return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
+        error: error,
+        warning: warning,
+        info: info,
+        tooltipFlipOverrides: ["top", "bottom"],
+        tooltipId: validationId
+      }));
+    }
+    const helpProps = {
+      onFocus: () => setFocus(true),
+      onBlur: () => setFocus(false)
+    };
+    if (labelHelp) {
+      return /*#__PURE__*/React.createElement(StyledIconWrapper, helpProps, /*#__PURE__*/React.createElement(Help, {
+        isFocused: isFocused
+      }, labelHelp));
+    }
+    return null;
+  };
   return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
@@ -57,11 +82,6 @@ const Fieldset = ({
     isRequired: isRequired,
     isOptional: isOptional,
     isDisabled: isDisabled
-  }, legend, !validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationIcon, {
-    error: error,
-    warning: warning,
-    info: info,
-    tooltipFlipOverrides: ["top", "bottom"]
-  })))), children));
+  }, legend, !validationRedesignOptIn && tooltipIcon()))), children));
 };
 export default Fieldset;

package/esm/__internal__/fieldset/fieldset.style.d.ts

@@ -15,4 +15,5 @@ declare type StyledLegendProps = {
     rightPadding?: 1 | 2;
 };
 declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
-export { StyledFieldset, StyledLegend, StyledLegendContent };
+declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper };

package/esm/__internal__/fieldset/fieldset.style.js

@@ -75,4 +75,7 @@ const StyledLegend = styled.legend`
     `}
   ${margin}
 `;
-export { StyledFieldset, StyledLegend, StyledLegendContent };
+const StyledIconWrapper = styled.div`
+  margin-left: var(--spacing050);
+`;
+export { StyledFieldset, StyledLegend, StyledLegendContent, StyledIconWrapper };

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

@@ -1131,6 +1131,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

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

@@ -758,6 +758,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

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

@@ -685,6 +685,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

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

@@ -36,8 +36,6 @@ export const MultiActionButton = ({
   } = useChildButtons(buttonRef);
   const handleInsideClick = useClickAwayListener(hideButtons);
   const handleClick = ev => {
-    // ensure button is focused when clicked (Safari)
-    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {
@@ -56,6 +54,7 @@ export const MultiActionButton = ({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
+    disablePortal: true,
     placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,
     middleware: [offset(6), flip({

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

@@ -624,6 +624,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

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

@@ -4,21 +4,20 @@ import PropTypes from "prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events";
-import { StyledNumeralDate, StyledDateField } from "./numeral-date.style";
+import { StyledNumeralDate, StyledDateField, StyledFieldset } from "./numeral-date.style";
 import Textbox from "../textbox";
 import Box from "../box";
-import Typography from "../typography";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
-import FormField from "../../__internal__/form-field";
-import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "./__internal__/numeral-date.context";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import Logger from "../../__internal__/utils/logger";
+import FieldHelp from "../../__internal__/field-help";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["yyyy", "mm", "dd"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['yyyy', 'mm', 'dd'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
@@ -105,7 +104,7 @@ export const NumeralDate = ({
   required,
   isOptional,
   readOnly,
-  size,
+  size = "medium",
   enableInternalError,
   enableInternalWarning,
   tooltipPosition,
@@ -119,14 +118,18 @@ export const NumeralDate = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
-  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const {
     current: uniqueId
   } = useRef(id || guid());
+  const inputIds = useRef({
+    dd: guid(),
+    mm: guid(),
+    yyyy: guid()
+  });
+  const inputHintId = useRef(guid());
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = useRef(dateFormat.map(() => null));
-  const labelIds = useRef([guid(), guid(), guid()]);
   const [internalMessages, setInternalMessages] = useState({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -196,109 +199,143 @@ export const NumeralDate = ({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel
-  }, /*#__PURE__*/React.createElement(InputGroupBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled: disabled,
-    useValidationIcon: validationOnLabel,
+  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  let inline = labelInline;
+  if (adaptiveLabelBreakpoint) {
+    inline = largeScreen;
+  }
+  const handleRef = (element, index, inputRef) => {
+    refs.current[index] = element;
+    if (!inputRef) {
+      return;
+    }
+    if (typeof inputRef === "function") {
+      inputRef(element);
+    } else {
+      inputRef.current = element;
+    }
+  };
+  const {
+    validationId,
+    fieldHelpId,
+    ariaDescribedBy
+  } = useInputAccessibility({
     id: uniqueId,
+    // we still want to add the validationId to aria-describedby with the legacy validation
+    validationRedesignOptIn: true,
     error: internalError,
     warning: internalWarning,
-    info: info,
-    label: label,
-    labelInline: labelInlineWithNewValidation,
-    labelWidth: labelWidth,
-    labelAlign: labelAlign,
-    labelHelp: !validationRedesignOptIn && labelHelp,
-    labelSpacing: labelSpacing,
-    fieldHelp: fieldHelp,
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    info,
+    fieldHelp
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
+  const renderInputs = () => {
+    return /*#__PURE__*/React.createElement(StyledNumeralDate, {
+      onKeyDown: onKeyDown
+    }, dateFormat.map((datePart, index) => {
+      const isEnd = index === dateFormat.length - 1;
+      let inputRef;
+      const validation = internalError || internalWarning || info;
+      const validationInField = !validationRedesignOptIn && typeof validation === "string" && validation !== "";
+      switch (datePart.slice(0, 2)) {
+        case "dd":
+          inputRef = dayRef;
+          break;
+        case "mm":
+          inputRef = monthRef;
+          break;
+        case "yy":
+          inputRef = yearRef;
+          break;
+        /* istanbul ignore next */
+        default:
+          break;
+      }
+      return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
+        value: {
+          disableErrorBorder: true
+        },
+        key: datePart
+      }, /*#__PURE__*/React.createElement(StyledDateField, {
+        key: datePart,
+        size: size,
+        isYearInput: datePart.length === 4,
+        hasValidationIconInField: !validationOnLabel && isEnd && validationInField
+      }, /*#__PURE__*/React.createElement(Textbox, _extends({
+        id: inputIds.current[datePart],
+        label: getDateLabel(datePart, locale),
+        disabled: disabled,
+        readOnly: readOnly,
+        error: !!internalError,
+        warning: !!internalWarning,
+        info: !!info,
+        size: size,
+        value: dateValue[datePart],
+        onChange: e => handleChange(e, datePart),
+        onBlur: handleBlur,
+        ref: element => handleRef(element, index, inputRef)
+      }, isEnd && !validationOnLabel && !validationRedesignOptIn && {
+        error: internalError,
+        warning: internalWarning,
+        info
+      }, {
+        tooltipPosition: tooltipPosition,
+        tooltipId: validationId
+      }))));
+    }));
+  };
+  if (!validationRedesignOptIn) {
+    return /*#__PURE__*/React.createElement(TooltipProvider, {
+      helpAriaLabel: helpAriaLabel
+    }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
+      "data-component": dataComponent || "numeral-date",
+      "data-element": dataElement,
+      "data-role": dataRole,
+      id: uniqueId,
+      legend: label,
+      isRequired: required,
+      isOptional: isOptional,
+      isDisabled: disabled,
+      name: name,
+      error: validationOnLabel && internalError,
+      warning: validationOnLabel && internalWarning,
+      info: validationOnLabel && info,
+      inline: inline,
+      labelHelp: labelHelp,
+      legendAlign: labelAlign,
+      legendWidth: labelWidth,
+      legendSpacing: labelSpacing,
+      validationId: validationId,
+      "aria-describedby": ariaDescribedBy
+    }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Box, {
+      display: "block",
+      mt: 1
+    }, renderInputs(), fieldHelp && /*#__PURE__*/React.createElement(FieldHelp, {
+      id: fieldHelpId
+    }, fieldHelp))));
+  }
+  return /*#__PURE__*/React.createElement(StyledFieldset, _extends({
+    "data-component": dataComponent || "numeral-date",
+    "data-element": dataElement,
+    "data-role": dataRole,
+    id: uniqueId,
+    legend: label,
     isRequired: required,
     isOptional: isOptional,
-    validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
-    position: "relative"
-  }, validationRedesignOptIn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
+    isDisabled: disabled,
+    name: name,
+    "aria-describedby": combinedAriaDescribedBy
+  }, filterStyledSystemMarginProps(rest)), labelHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+    id: inputHintId.current
+  }, labelHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    mt: 1
+  }, (internalError || internalWarning) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: internalError,
-    warning: internalWarning
-  }), (internalError || internalWarning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: internalWarning,
+    validationId: validationId
+  }), /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!internalError && internalWarning)
-  })), /*#__PURE__*/React.createElement(StyledNumeralDate, {
-    name: name,
-    onKeyDown: onKeyDown,
-    "data-component": "numeral-date"
-  }, dateFormat.map((datePart, index) => {
-    const isEnd = index === dateFormat.length - 1;
-    const labelId = labelIds.current[index];
-    const validation = internalError || internalWarning || info;
-    const isStringValidation = typeof validation === "string";
-    const hasValidationIcon = isStringValidation && !!validation.length;
-    let inputRef;
-    switch (datePart.slice(0, 2)) {
-      case "dd":
-        inputRef = dayRef;
-        break;
-      case "mm":
-        inputRef = monthRef;
-        break;
-      case "yy":
-        inputRef = yearRef;
-        break;
-      /* istanbul ignore next */
-      default:
-        break;
-    }
-    return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
-      value: {
-        disableErrorBorder: true
-      },
-      key: datePart
-    }, /*#__PURE__*/React.createElement(StyledDateField, {
-      key: datePart,
-      isYearInput: datePart.length === 4,
-      isEnd: isEnd,
-      hasValidationIconInField: hasValidationIcon && !validationOnLabel && !validationRedesignOptIn
-    }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
-      marginBottom: undefined
-    }, /*#__PURE__*/React.createElement(Typography, {
-      mb: "4px",
-      id: labelId,
-      "data-role": "numeral-date-input-text"
-    }, getDateLabel(datePart, locale)), /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
-      id: uniqueId
-    }, {
-      disabled: disabled,
-      readOnly: readOnly,
-      value: dateValue[datePart],
-      onChange: e => handleChange(e, datePart),
-      onBlur: handleBlur,
-      ref: element => {
-        refs.current[index] = element;
-        if (!inputRef) {
-          return;
-        }
-        if (typeof inputRef === "function") {
-          inputRef(element);
-        } else {
-          inputRef.current = element;
-        }
-      },
-      error: !!internalError,
-      warning: !!internalWarning,
-      info: !!info
-    }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
-      error: internalError,
-      warning: internalWarning,
-      info
-    }, {
-      size: size,
-      tooltipPosition: tooltipPosition,
-      "aria-labelledby": labelId,
-      required: required
-    })))));
-  }))))));
+  })), renderInputs()));
 };
 export default NumeralDate;

package/esm/components/numeral-date/numeral-date.style.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 interface StyledDateFieldProps {
-    isEnd?: boolean;
     isYearInput?: boolean;
-    hasValidationIconInField?: boolean;
+    hasValidationIconInField: boolean;
+    size?: "small" | "medium" | "large";
 }
 export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
     name?: string | undefined;
 }, never>;
 export declare const StyledDateField: import("styled-components").StyledComponent<"div", any, StyledDateFieldProps, never>;
+export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, labelHelp, validationId, ...rest }: import("../../__internal__/fieldset").FieldsetProps) => import("react").JSX.Element, any, {}, never>;
 export {};

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

@@ -1,54 +1,62 @@
 import styled, { css } from "styled-components";
-import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import StyledIconSpan from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import StyledInput from "../../__internal__/input/input.style";
-import StyledFormField from "../../__internal__/form-field/form-field.style";
-import StyledLabel from "../../__internal__/label/label.style";
-import { StyledHintText } from "../textbox/textbox.style";
+import Fieldset from "../../__internal__/fieldset";
+import { StyledLegend } from "../../__internal__/fieldset/fieldset.style";
+const inputWidth = {
+  small: "44px",
+  medium: "50px",
+  large: "64px"
+};
+const inputWidthYear = hasValidationIconInField => ({
+  small: hasValidationIconInField ? "75px" : "66px",
+  medium: "80px",
+  large: "84px"
+});
 export const StyledNumeralDate = styled.div`
   display: inline-flex;
-  font-size: 14px;
-  font-weight: 400;
-
-  ${StyledFormField} {
-    margin-top: 0px;
-  }
-  ${StyledLabel} {
-    font-weight: 400;
-  }
-
-  ${StyledHintText} {
-    color: var(--colorsUtilityYin090);
-  }
+  gap: var(--spacing150);
 `;
 export const StyledDateField = styled.div`
   ${({
   isYearInput,
-  isEnd,
-  hasValidationIconInField
-}) => {
-  return css`
+  hasValidationIconInField,
+  size
+}) => css`
+    ${size && css`
       ${StyledInputPresentation} {
         position: relative;
-        margin-right: ${isEnd ? "0" : "12px"};
-        min-width: ${isYearInput ? "80px" : "55px"};
+        min-width: ${isYearInput ? inputWidthYear(hasValidationIconInField)[size] : inputWidth[size]};
+      }
+    `}
 
-        ${StyledInput} {
-          text-align: center;
-          padding: 0 12px;
-          ${hasValidationIconInField && isEnd && "padding-right: 0"}
-        }
+    ${StyledInput} {
+      text-align: center;
+      ${hasValidationIconInField && "padding-right: 0"}
+    }
 
-        ${StyledIconSpan} {
-          width: 32px;
-          z-index: 999;
-        }
+    ${StyledIconSpan} {
+      width: var(--spacing400);
+      z-index: 999;
+    }
 
-        ${StyledValidationIcon} {
-          z-index: 9000;
-        }
-      }
-    `;
-}}
+    label {
+      font-weight: var(--fontWeights400);
+    }
+  `}
+`;
+export const StyledFieldset = styled(Fieldset)`
+  ${({
+  inline
+}) => css`
+    ${inline && css`
+      display: flex;
+      align-items: center;
+    `}
+  `}
+
+  ${StyledLegend} {
+    margin-bottom: 0;
+  }
 `;

package/esm/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -677,6 +677,7 @@ if (process.env.NODE_ENV !== "production") {
     "suppressHydrationWarning": PropTypes.bool,
     "tabIndex": PropTypes.number,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "transparent": PropTypes.bool,

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -1058,6 +1058,7 @@ if (process.env.NODE_ENV !== "production") {
     "tabIndex": PropTypes.number,
     "tableHeader": PropTypes.node,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

package/esm/components/select/multi-select/multi-select.component.js

@@ -1073,6 +1073,7 @@ if (process.env.NODE_ENV !== "production") {
     "tabIndex": PropTypes.number,
     "tableHeader": PropTypes.node,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "typeof": PropTypes.string,

package/esm/components/select/simple-select/simple-select.component.js

@@ -934,6 +934,7 @@ if (process.env.NODE_ENV !== "production") {
     "tabIndex": PropTypes.number,
     "tableHeader": PropTypes.node,
     "title": PropTypes.string,
+    "tooltipId": PropTypes.string,
     "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
     "translate": PropTypes.oneOf(["no", "yes"]),
     "transparent": PropTypes.bool,

package/esm/components/split-button/split-button.component.js

@@ -68,8 +68,6 @@ export const SplitButton = ({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const handleToggleClick = () => {
-    // ensure button is focused when clicked (Safari)
-    toggleButton.current?.focus();
     showButtons();
   };
   const toggleButtonProps = {
@@ -119,6 +117,7 @@ export const SplitButton = ({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
+      disablePortal: true,
       placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       reference: buttonNode,
       middleware: [offset(6), flip({

package/esm/components/split-button/split-button.style.js

@@ -7,7 +7,7 @@ const StyledSplitButton = styled.div`
   display: inline-block;
   position: relative;
 
-  ${StyledButton}:first-of-type {
+  & > ${StyledButton}:first-of-type {
     border-top-right-radius: var(--borderRadius000);
     border-bottom-right-radius: var(--borderRadius000);
   }

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

@@ -94,6 +94,8 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     helpAriaLabel?: string;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** The id attribute for the validation tooltip */
+    tooltipId?: string;
 }
 export interface TextboxProps extends CommonTextboxProps {
     /** Content to be rendered next to the input */