carbon-react 124.4.0 → 124.5.0

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
 export interface DayMonthDate {
     dd: string;
     mm: string;

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

@@ -6,7 +6,9 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events";
 import { StyledNumeralDate, StyledDateField } from "./numeral-date.style";
 import Textbox from "../textbox";
-import { StyledHintText } from "../textbox/textbox.style";
+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";
@@ -18,8 +20,8 @@ import NumeralDateContext from "./numeral-date-context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
-export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["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'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
+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']";
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
 const isMonthValid = month => month ? +month > 0 && +month < 13 : true;
 const isYearValid = year => year ? +year > 1799 && +year < 2201 : true;
@@ -28,6 +30,16 @@ const validations = {
   mm: isMonthValid,
   yyyy: isYearValid
 };
+const getDateLabel = (datePart, locale) => {
+  switch (datePart) {
+    case "mm":
+      return locale.numeralDate.labels.month();
+    case "yyyy":
+      return locale.numeralDate.labels.year();
+    default:
+      return locale.numeralDate.labels.day();
+  }
+};
 export const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -64,7 +76,7 @@ export const NumeralDate = ({
   yearRef,
   ...rest
 }) => {
-  const l = useLocale();
+  const locale = useLocale();
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -74,6 +86,7 @@ export const NumeralDate = ({
   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, ""]))
   });
@@ -87,9 +100,9 @@ export const NumeralDate = ({
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
   }, [value]);
   const validationMessages = {
-    dd: l.numeralDate.validation.day(),
-    mm: l.numeralDate.validation.month(),
-    yyyy: l.numeralDate.validation.year()
+    dd: locale.numeralDate.validation.day(),
+    mm: locale.numeralDate.validation.month(),
+    yyyy: locale.numeralDate.validation.year()
   };
   const [dateValue, setDateValue] = useState({
     ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
@@ -101,7 +114,7 @@ export const NumeralDate = ({
       value: newValue
     }
   });
-  const onKeyPress = event => {
+  const onKeyDown = event => {
     const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
     if (!isValidKey) {
       event.preventDefault();
@@ -166,24 +179,27 @@ export const NumeralDate = ({
     labelInline: labelInline,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
-    labelHelp: labelHelp,
+    labelHelp: !validationRedesignOptIn && labelHelp,
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+  }, 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, {
     error: internalError,
     warning: internalWarning
-  }), /*#__PURE__*/React.createElement(StyledNumeralDate, {
+  }), (internalError || internalWarning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!internalError && internalWarning)
+  })), /*#__PURE__*/React.createElement(StyledNumeralDate, {
     name: name,
-    onKeyPress: onKeyPress,
+    onKeyDown: onKeyDown,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
-    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
-    const isMiddle = index === 1;
-    const validation = error || warning || info;
+    const labelId = labelIds.current[index];
+    const validation = internalError || internalWarning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && !!validation.length;
     let inputRef;
@@ -203,24 +219,24 @@ export const NumeralDate = ({
     }
     return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
       value: {
-        disableErrorBorder: index !== 0
+        disableErrorBorder: true
       },
       key: datePart
     }, /*#__PURE__*/React.createElement(StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
-      isStart: isStart,
-      isMiddle: isMiddle,
       isEnd: isEnd,
-      hasValidationIcon: hasValidationIcon
+      hasValidationIconInField: hasValidationIcon && !validationOnLabel && !validationRedesignOptIn
     }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
       marginBottom: undefined
-    }, /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
+    }, /*#__PURE__*/React.createElement(Typography, {
+      mb: "4px",
+      id: labelId
+    }, getDateLabel(datePart, locale)), /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
       id: uniqueId
     }, {
       disabled: disabled,
       readOnly: readOnly,
-      placeholder: datePart,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
       ref: element => {
@@ -246,8 +262,9 @@ export const NumeralDate = ({
       info
     }, {
       size: size,
-      tooltipPosition: tooltipPosition
+      tooltipPosition: tooltipPosition,
+      "aria-labelledby": labelId
     })))));
-  })))));
+  }))))));
 };
 export default NumeralDate;

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

@@ -1,9 +1,7 @@
 interface StyledDateFieldProps {
-    isStart?: boolean;
     isEnd?: boolean;
-    isMiddle?: boolean;
     isYearInput?: boolean;
-    hasValidationIcon?: boolean;
+    hasValidationIconInField?: boolean;
 }
 export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
     name?: string | undefined;

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

@@ -1,47 +1,44 @@
 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 StyledInputPresentantion from "../../__internal__/input/input-presentation.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";
 export const StyledNumeralDate = styled.div`
   display: inline-flex;
-  height: 40px;
   font-size: 14px;
   font-weight: 400;
 
   ${StyledFormField} {
     margin-top: 0px;
   }
+  ${StyledLabel} {
+    font-weight: 400;
+  }
+
+  ${StyledHintText} {
+    color: var(--colorsUtilityYin090);
+  }
 `;
 export const StyledDateField = styled.div`
   ${({
-  isStart,
   isYearInput,
   isEnd,
-  hasValidationIcon,
-  isMiddle
+  hasValidationIconInField
 }) => {
-  const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
   return css`
-      ${StyledInputPresentantion} {
+      ${StyledInputPresentation} {
         position: relative;
-        width: ${yearInputOrError ? "78px;" : "58px;"};
-        text-align: center;
-        border-radius: var(--borderRadius000);
+        margin-right: ${isEnd ? "0" : "12px"};
+        min-width: ${isYearInput ? "80px" : "55px"};
 
-        ${isStart && css`
-            border-top-left-radius: var(--borderRadius050);
-            border-bottom-left-radius: var(--borderRadius050);
-          `}
-
-        ${isEnd && css`
-            border-top-right-radius: var(--borderRadius050);
-            border-bottom-right-radius: var(--borderRadius050);
-          `}
-
-        ${(isMiddle || isEnd) && css`
-            margin-left: -1px;
-          `}
+        ${StyledInput} {
+          text-align: center;
+          padding: 0 12px;
+          ${hasValidationIconInField && isEnd && "padding-right: 0"}
+        }
 
         ${StyledIconSpan} {
           width: 32px;
@@ -51,6 +48,7 @@ export const StyledDateField = styled.div`
         ${StyledValidationIcon} {
           z-index: 9000;
         }
-      `;
+      }
+    `;
 }}
 `;

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

@@ -184,6 +184,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const lastOptionIndex = findLastIndex(childrenList, child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow));
   const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
+    if (lastIndex === -1) {
+      return -1;
+    }
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
     if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
@@ -201,7 +204,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       currentIndex = indexOfHighlighted;
     }
     const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
-    if (currentIndex === nextIndex) {
+    if (nextIndex === -1 || currentIndex === nextIndex) {
       return;
     }
     const {
@@ -282,10 +285,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const element = event.target;
 
     /* istanbul ignore else */
-    if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
+    if (isOpen && onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
     }
-  }, [onListScrollBottom]);
+  }, [onListScrollBottom, isOpen]);
   useEffect(() => {
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
@@ -322,10 +325,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
     setCurrentOptionsListIndex(indexOfMatch);
     virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-    // TODO: is there a better way than calling handleListScroll manually?
-    handleListScroll({
-      target: listContainerRef.current
-    });
   }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
   useEffect(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {

package/esm/locales/en-gb.js

@@ -94,6 +94,11 @@ const enGB = {
       day: () => "Day should be a number within a 1-31 range.",
       month: () => "Month should be a number within a 1-12 range.",
       year: () => "Year should be a number within a 1800-2200 range."
+    },
+    labels: {
+      day: () => "Day",
+      month: () => "Month",
+      year: () => "Year"
     }
   },
   pager: {

package/esm/locales/locale.d.ts

@@ -78,6 +78,11 @@ interface Locale {
             month: () => string;
             year: () => string;
         };
+        labels: {
+            day: () => string;
+            month: () => string;
+            year: () => string;
+        };
     };
     pager: {
         show: () => string;

package/esm/locales/pl-pl.js

@@ -129,6 +129,11 @@ const plPL = {
       day: () => "Dzień musi być liczbą w zakresie 1-31.",
       month: () => "Miesiąć musi być liczbą w zakresie 1-12.",
       year: () => "Rok musi być liczbą w zakresie 1800-2200."
+    },
+    labels: {
+      day: () => "Dzień",
+      month: () => "Miesiąć",
+      year: () => "Rok"
     }
   },
   pager: {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
 export interface DayMonthDate {
     dd: string;
     mm: string;

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

@@ -11,6 +11,8 @@ var _utils = require("../../style/utils");
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _numeralDate = require("./numeral-date.style");
 var _textbox = _interopRequireDefault(require("../textbox"));
+var _box = _interopRequireDefault(require("../box"));
+var _typography = _interopRequireDefault(require("../typography"));
 var _textbox2 = require("../textbox/textbox.style");
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -27,8 +29,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 deprecateUncontrolledWarnTriggered = false;
-const ALLOWED_DATE_FORMATS = exports.ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["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'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
+const ALLOWED_DATE_FORMATS = exports.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']";
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
 const isMonthValid = month => month ? +month > 0 && +month < 13 : true;
 const isYearValid = year => year ? +year > 1799 && +year < 2201 : true;
@@ -37,6 +39,16 @@ const validations = {
   mm: isMonthValid,
   yyyy: isYearValid
 };
+const getDateLabel = (datePart, locale) => {
+  switch (datePart) {
+    case "mm":
+      return locale.numeralDate.labels.month();
+    case "yyyy":
+      return locale.numeralDate.labels.year();
+    default:
+      return locale.numeralDate.labels.day();
+  }
+};
 const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -73,7 +85,7 @@ const NumeralDate = ({
   yearRef,
   ...rest
 }) => {
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -83,6 +95,7 @@ const NumeralDate = ({
   const isControlled = (0, _react.useRef)(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = (0, _react.useRef)(dateFormat.map(() => null));
+  const labelIds = (0, _react.useRef)([(0, _guid.default)(), (0, _guid.default)(), (0, _guid.default)()]);
   const [internalMessages, setInternalMessages] = (0, _react.useState)({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -96,9 +109,9 @@ const NumeralDate = ({
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
   }, [value]);
   const validationMessages = {
-    dd: l.numeralDate.validation.day(),
-    mm: l.numeralDate.validation.month(),
-    yyyy: l.numeralDate.validation.year()
+    dd: locale.numeralDate.validation.day(),
+    mm: locale.numeralDate.validation.month(),
+    yyyy: locale.numeralDate.validation.year()
   };
   const [dateValue, setDateValue] = (0, _react.useState)({
     ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
@@ -110,7 +123,7 @@ const NumeralDate = ({
       value: newValue
     }
   });
-  const onKeyPress = event => {
+  const onKeyDown = event => {
     const isValidKey = _events.default.isNumberKey(event) || _events.default.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
     if (!isValidKey) {
       event.preventDefault();
@@ -175,24 +188,27 @@ const NumeralDate = ({
     labelInline: labelInline,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
-    labelHelp: labelHelp,
+    labelHelp: !validationRedesignOptIn && labelHelp,
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
     validationRedesignOptIn: validationRedesignOptIn
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: internalError,
     warning: internalWarning
-  }), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
+  }), (internalError || internalWarning) && /*#__PURE__*/_react.default.createElement(_textbox2.ErrorBorder, {
+    warning: !!(!internalError && internalWarning)
+  })), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
     name: name,
-    onKeyPress: onKeyPress,
+    onKeyDown: onKeyDown,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
-    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
-    const isMiddle = index === 1;
-    const validation = error || warning || info;
+    const labelId = labelIds.current[index];
+    const validation = internalError || internalWarning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && !!validation.length;
     let inputRef;
@@ -212,24 +228,24 @@ const NumeralDate = ({
     }
     return /*#__PURE__*/_react.default.createElement(_numeralDateContext.default.Provider, {
       value: {
-        disableErrorBorder: index !== 0
+        disableErrorBorder: true
       },
       key: datePart
     }, /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
-      isStart: isStart,
-      isMiddle: isMiddle,
       isEnd: isEnd,
-      hasValidationIcon: hasValidationIcon
+      hasValidationIconInField: hasValidationIcon && !validationOnLabel && !validationRedesignOptIn
     }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
       marginBottom: undefined
-    }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, index === 0 && {
+    }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+      mb: "4px",
+      id: labelId
+    }, getDateLabel(datePart, locale)), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, index === 0 && {
       id: uniqueId
     }, {
       disabled: disabled,
       readOnly: readOnly,
-      placeholder: datePart,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
       ref: element => {
@@ -255,9 +271,10 @@ const NumeralDate = ({
       info
     }, {
       size: size,
-      tooltipPosition: tooltipPosition
+      tooltipPosition: tooltipPosition,
+      "aria-labelledby": labelId
     })))));
-  })))));
+  }))))));
 };
 exports.NumeralDate = NumeralDate;
 var _default = exports.default = NumeralDate;

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

@@ -1,9 +1,7 @@
 interface StyledDateFieldProps {
-    isStart?: boolean;
     isEnd?: boolean;
-    isMiddle?: boolean;
     isYearInput?: boolean;
-    hasValidationIcon?: boolean;
+    hasValidationIconInField?: boolean;
 }
 export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
     name?: string | undefined;

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

@@ -8,49 +8,46 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
+var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
+var _label = _interopRequireDefault(require("../../__internal__/label/label.style"));
+var _textbox = require("../textbox/textbox.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledNumeralDate = exports.StyledNumeralDate = _styledComponents.default.div`
   display: inline-flex;
-  height: 40px;
   font-size: 14px;
   font-weight: 400;
 
   ${_formField.default} {
     margin-top: 0px;
   }
+  ${_label.default} {
+    font-weight: 400;
+  }
+
+  ${_textbox.StyledHintText} {
+    color: var(--colorsUtilityYin090);
+  }
 `;
 const StyledDateField = exports.StyledDateField = _styledComponents.default.div`
   ${({
-  isStart,
   isYearInput,
   isEnd,
-  hasValidationIcon,
-  isMiddle
+  hasValidationIconInField
 }) => {
-  const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
   return (0, _styledComponents.css)`
       ${_inputPresentation.default} {
         position: relative;
-        width: ${yearInputOrError ? "78px;" : "58px;"};
-        text-align: center;
-        border-radius: var(--borderRadius000);
+        margin-right: ${isEnd ? "0" : "12px"};
+        min-width: ${isYearInput ? "80px" : "55px"};
 
-        ${isStart && (0, _styledComponents.css)`
-            border-top-left-radius: var(--borderRadius050);
-            border-bottom-left-radius: var(--borderRadius050);
-          `}
-
-        ${isEnd && (0, _styledComponents.css)`
-            border-top-right-radius: var(--borderRadius050);
-            border-bottom-right-radius: var(--borderRadius050);
-          `}
-
-        ${(isMiddle || isEnd) && (0, _styledComponents.css)`
-            margin-left: -1px;
-          `}
+        ${_input.default} {
+          text-align: center;
+          padding: 0 12px;
+          ${hasValidationIconInField && isEnd && "padding-right: 0"}
+        }
 
         ${_inputIconToggle.default} {
           width: 32px;
@@ -60,6 +57,7 @@ const StyledDateField = exports.StyledDateField = _styledComponents.default.div`
         ${_validationIcon.default} {
           z-index: 9000;
         }
-      `;
+      }
+    `;
 }}
 `;

package/lib/components/select/select-list/select-list.component.js

@@ -193,6 +193,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const lastOptionIndex = (0, _findLastIndex.default)(childrenList, child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default));
   const getNextHighlightableItemIndex = (0, _react.useCallback)((key, indexOfHighlighted) => {
     const lastIndex = lastOptionIndex;
+    if (lastIndex === -1) {
+      return -1;
+    }
     let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
     if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default) {
@@ -210,7 +213,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       currentIndex = indexOfHighlighted;
     }
     const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
-    if (currentIndex === nextIndex) {
+    if (nextIndex === -1 || currentIndex === nextIndex) {
       return;
     }
     const {
@@ -291,10 +294,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     const element = event.target;
 
     /* istanbul ignore else */
-    if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
+    if (isOpen && onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
     }
-  }, [onListScrollBottom]);
+  }, [onListScrollBottom, isOpen]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
@@ -331,10 +334,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
     setCurrentOptionsListIndex(indexOfMatch);
     virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-    // TODO: is there a better way than calling handleListScroll manually?
-    handleListScroll({
-      target: listContainerRef.current
-    });
   }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
   (0, _react.useEffect)(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {

package/lib/locales/en-gb.js

@@ -100,6 +100,11 @@ const enGB = {
       day: () => "Day should be a number within a 1-31 range.",
       month: () => "Month should be a number within a 1-12 range.",
       year: () => "Year should be a number within a 1800-2200 range."
+    },
+    labels: {
+      day: () => "Day",
+      month: () => "Month",
+      year: () => "Year"
     }
   },
   pager: {

package/lib/locales/locale.d.ts

@@ -78,6 +78,11 @@ interface Locale {
             month: () => string;
             year: () => string;
         };
+        labels: {
+            day: () => string;
+            month: () => string;
+            year: () => string;
+        };
     };
     pager: {
         show: () => string;

package/lib/locales/pl-pl.js

@@ -136,6 +136,11 @@ const plPL = {
       day: () => "Dzień musi być liczbą w zakresie 1-31.",
       month: () => "Miesiąć musi być liczbą w zakresie 1-12.",
       year: () => "Rok musi być liczbą w zakresie 1800-2200."
+    },
+    labels: {
+      day: () => "Dzień",
+      month: () => "Miesiąć",
+      year: () => "Rok"
     }
   },
   pager: {

package/package.json

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