carbon-react 144.9.11 → 144.11.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/draggable/draggable-container.component.d.ts

@@ -10,9 +10,14 @@ export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "da
      * `<DraggableItem />` is required to make `Draggable` works
      */
     children?: React.ReactNode;
+    /**
+     * Defines the direction in which the draggable items contents are placed.
+     * Can be either "row" or "row-reverse".
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableContainer: {
-    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, flexDirection, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

package/esm/components/draggable/draggable-container.component.js

@@ -12,6 +12,7 @@ const DraggableContainer = ({
   "data-role": dataRole = "draggable-container",
   children,
   getOrder,
+  flexDirection = "row",
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
@@ -67,7 +68,8 @@ const DraggableContainer = ({
     return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
       id: `${item.props.id}`,
       findItem,
-      moveItem
+      moveItem,
+      flexDirection
     }, [item.props.children]);
   })));
 };
@@ -76,6 +78,7 @@ if (process.env.NODE_ENV !== "production") {
     "children": PropTypes.node,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "getOrder": PropTypes.func,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -22,9 +22,14 @@ export interface DraggableItemProps extends PaddingProps {
      * @ignore
      */
     moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+    /**
+     * @private
+     * @ignore
+     */
+    flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id, findItem, moveItem, children, py, flexDirection, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

package/esm/components/draggable/draggable-item/draggable-item.component.js

@@ -3,13 +3,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDrop, useDrag } from "react-dnd";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
+import { StyledDraggableItem } from "./draggable-item.style";
+import Icon from "../../icon";
 const DraggableItem = ({
   id,
   findItem,
   moveItem,
   children,
   py = 1,
+  flexDirection,
   ...rest
 }) => {
   let originalIndex;
@@ -60,8 +62,9 @@ const DraggableItem = ({
     "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
-    py: py
-  }, paddingProps), children, /*#__PURE__*/React.createElement(StyledIcon, {
+    py: py,
+    flexDirection: flexDirection
+  }, paddingProps), children, /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
   }));
 };
@@ -69,6 +72,7 @@ if (process.env.NODE_ENV !== "production") {
   DraggableItem.propTypes = {
     "children": PropTypes.node,
     "findItem": PropTypes.func,
+    "flexDirection": PropTypes.oneOf(["row-reverse", "row"]),
     "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     "moveItem": PropTypes.func,
     "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/draggable/draggable-item/draggable-item.style.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { PaddingProps } from "styled-system";
 declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledDraggableItemProps extends PaddingProps {
     isDragging?: boolean;
+    flexDirection?: "row" | "row-reverse";
 }
 declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

package/esm/components/draggable/draggable-item/draggable-item.style.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 import { padding, margin } from "styled-system";
 import { baseTheme } from "../../../style/themes";
-import Icon from "../../icon";
 const StyledDraggableContainer = styled.div`
   ${margin}
 `;
@@ -11,18 +10,18 @@ const StyledDraggableItem = styled.div`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
   ${padding}
   cursor: move;
-
+  justify-content: space-between;
+  flex-direction: ${({
+  flexDirection
+}) => flexDirection};
   opacity: ${({
   isDragging
 }) => isDragging ? "0" : "1"};
 `;
-const StyledIcon = styled(Icon)`
-  margin-left: auto;
-`;
 StyledDraggableContainer.defaultProps = {
   theme: baseTheme
 };
 StyledDraggableItem.defaultProps = {
   theme: baseTheme
 };
-export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };
+export { StyledDraggableContainer, StyledDraggableItem };

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/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 {};