carbon-react 125.0.1 → 125.1.0

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

@@ -12,6 +12,7 @@ export interface PopoverProps {
     reference: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     animationFrame?: boolean;
+    popoverStrategy?: "absolute" | "fixed";
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -17,7 +17,8 @@ const Popover = ({
   middleware = defaultMiddleware,
   disableBackgroundUI,
   isOpen = true,
-  animationFrame
+  animationFrame,
+  popoverStrategy = "absolute"
 }) => {
   const elementDOM = useRef(null);
   const {
@@ -46,7 +47,8 @@ const Popover = ({
     floating: floatingReference,
     placement,
     middleware,
-    animationFrame
+    animationFrame,
+    strategy: popoverStrategy
   });
   useEffect(() => {
     return () => {

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

@@ -22,13 +22,52 @@ import Logger from "../../__internal__/utils/logger";
 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']";
-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;
-const validations = {
-  dd: isDayValid,
-  mm: isMonthValid,
-  yyyy: isYearValid
+const getMonthsForLocale = localeName => {
+  const year = new Date().getFullYear();
+  const {
+    format
+  } = new Intl.DateTimeFormat(localeName, {
+    month: "long"
+  });
+  return [...Array(12).keys()].map(m => format(new Date(Date.UTC(year, m))));
+};
+const validationMessages = (locale, month, daysInMonth) => ({
+  dd: locale.numeralDate.validation.day(month ? getMonthsForLocale(locale.locale())[+month - 1] : undefined, daysInMonth),
+  mm: locale.numeralDate.validation.month(),
+  yyyy: locale.numeralDate.validation.year()
+});
+const getDaysInMonth = (month, year) => {
+  if (month && (+month > 12 || +month < 1)) {
+    return 31;
+  }
+  const currentDate = new Date();
+  const computedYear = +(year || currentDate.getFullYear());
+  const computedMonth = +(month || currentDate.getMonth() + 1);
+
+  // passing 0 as the third argument ensures we handle for months being 0 indexed
+  return new Date(computedYear, computedMonth, 0).getDate();
+};
+const validate = (locale, {
+  dd,
+  mm,
+  yyyy
+}) => {
+  const failed = {
+    dd: "",
+    mm: "",
+    yyyy: ""
+  };
+  const daysInMonth = getDaysInMonth(mm, yyyy);
+  if (dd && (+dd > daysInMonth || +dd < 1)) {
+    failed.dd = validationMessages(locale, mm, String(daysInMonth)).dd;
+  }
+  if (mm && (+mm > 12 || +mm < 1)) {
+    failed.mm = validationMessages(locale).mm;
+  }
+  if (yyyy && (+yyyy < 1800 || +yyyy > 2200)) {
+    failed.yyyy = validationMessages(locale).yyyy;
+  }
+  return failed;
 };
 const getDateLabel = (datePart, locale) => {
   switch (datePart) {
@@ -99,11 +138,6 @@ export const NumeralDate = ({
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
   }, [value]);
-  const validationMessages = {
-    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, ""])))
   });
@@ -137,15 +171,13 @@ export const NumeralDate = ({
       }
     }
   };
-  const handleBlur = datePart => {
+  const handleBlur = () => {
     const internalValidationEnabled = enableInternalError || enableInternalWarning;
     /* istanbul ignore else */
     if (internalValidationEnabled) {
-      const newDatePart = dateValue[datePart];
-      const errorMessage = validations[datePart](newDatePart) ? "" : validationMessages[datePart];
       setInternalMessages(prev => ({
         ...prev,
-        [datePart]: errorMessage
+        ...validate(locale, dateValue)
       }));
     }
     setTimeout(() => {
@@ -239,6 +271,7 @@ export const NumeralDate = ({
       readOnly: readOnly,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
+      onBlur: handleBlur,
       ref: element => {
         refs.current[index] = element;
         if (!inputRef) {
@@ -250,7 +283,6 @@ export const NumeralDate = ({
           inputRef.current = element;
         }
       },
-      onBlur: () => handleBlur(datePart),
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info

package/esm/components/popover-container/popover-container.component.d.ts

@@ -55,6 +55,8 @@ export interface PopoverContainerProps extends PaddingProps {
     closeButtonAriaLabel?: string;
     /** Container aria label */
     containerAriaLabel?: string;
+    /** Disables the animation for the component */
+    disableAnimation?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
 export default PopoverContainer;

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

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
+import useMediaQuery from "../../hooks/useMediaQuery";
 import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon } from "./popover-container.style";
 import Icon from "../icon";
 import Popover from "../../__internal__/popover";
@@ -67,6 +68,7 @@ export const PopoverContainer = ({
   openButtonAriaLabel,
   closeButtonAriaLabel = "close",
   containerAriaLabel,
+  disableAnimation = false,
   ...rest
 }) => {
   const isControlled = open !== undefined;
@@ -78,6 +80,7 @@ export const PopoverContainer = ({
   const popoverContentNodeRef = useRef(null);
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   useEffect(() => {
     if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
   }, [isOpen]);
@@ -147,6 +150,7 @@ export const PopoverContainer = ({
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
   }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end"
   }, shouldCoverButton && {
@@ -159,7 +163,8 @@ export const PopoverContainer = ({
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
-    ref: popoverContentNodeRef
+    ref: popoverContentNodeRef,
+    disableAnimation: disableAnimation || reduceMotion
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"

package/esm/components/popover-container/popover-container.style.d.ts

@@ -4,6 +4,7 @@ declare const PopoverContainerWrapperStyle: import("styled-components").StyledCo
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;
+    disableAnimation?: boolean;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
 declare type AdditionalIconButtonProps = {

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

@@ -3,6 +3,33 @@ import { padding } from "styled-system";
 import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
+function animationToRender({
+  animationState,
+  disableAnimation
+}) {
+  if (disableAnimation) return "opacity: 1;";
+  switch (animationState) {
+    case "entering":
+      return `
+        opacity: 0;
+        transform: translateY(-8px);
+      `;
+    case "entered":
+      return `
+        opacity: 1; 
+        transform: translateY(0);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    case "exiting":
+      return `
+        opacity: 0; 
+        transform: translateY(-8px);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    default:
+      return "opacity: 0;";
+  }
+}
 const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
@@ -25,31 +52,7 @@ const PopoverContainerContentStyle = styled.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  animationState
-}) => {
-  switch (animationState) {
-    case "entering":
-      return `
-        opacity: 0;
-        transform: translateY(-8px);
-      `;
-    case "entered":
-      return `
-        opacity: 1; 
-        transform: translateY(0);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    case "exiting":
-      return `
-        opacity: 0; 
-        transform: translateY(-8px);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    default:
-      return "opacity: 0";
-  }
-}}
+  ${animationToRender}
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {

package/esm/locales/__internal__/pl-pl.js

@@ -126,7 +126,12 @@ const plPL = {
   },
   numeralDate: {
     validation: {
-      day: () => "Dzień musi być liczbą w zakresie 1-31.",
+      day: (month, daysInMonth) => {
+        if (month && daysInMonth) {
+          return `Dzień W ${month} musi być liczbą zakresie 1-${daysInMonth}.`;
+        }
+        return "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."
     },

package/esm/locales/en-gb.js

@@ -91,7 +91,12 @@ const enGB = {
   },
   numeralDate: {
     validation: {
-      day: () => "Day should be a number within a 1-31 range.",
+      day: (month, daysInMonth) => {
+        if (month && daysInMonth) {
+          return `Day in ${month} should be a number within 1-${daysInMonth}.`;
+        }
+        return "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."
     },

package/esm/locales/locale.d.ts

@@ -74,7 +74,7 @@ interface Locale {
     };
     numeralDate: {
         validation: {
-            day: () => string;
+            day: (month?: string, daysInMonth?: string) => string;
             month: () => string;
             year: () => string;
         };

package/lib/__internal__/popover/popover.component.d.ts

@@ -12,6 +12,7 @@ export interface PopoverProps {
     reference: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     animationFrame?: boolean;
+    popoverStrategy?: "absolute" | "fixed";
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/lib/__internal__/popover/popover.component.js

@@ -26,7 +26,8 @@ const Popover = ({
   middleware = defaultMiddleware,
   disableBackgroundUI,
   isOpen = true,
-  animationFrame
+  animationFrame,
+  popoverStrategy = "absolute"
 }) => {
   const elementDOM = (0, _react.useRef)(null);
   const {
@@ -55,7 +56,8 @@ const Popover = ({
     floating: floatingReference,
     placement,
     middleware,
-    animationFrame
+    animationFrame,
+    strategy: popoverStrategy
   });
   (0, _react.useEffect)(() => {
     return () => {

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

@@ -31,13 +31,52 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 let deprecateUncontrolledWarnTriggered = false;
 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;
-const validations = {
-  dd: isDayValid,
-  mm: isMonthValid,
-  yyyy: isYearValid
+const getMonthsForLocale = localeName => {
+  const year = new Date().getFullYear();
+  const {
+    format
+  } = new Intl.DateTimeFormat(localeName, {
+    month: "long"
+  });
+  return [...Array(12).keys()].map(m => format(new Date(Date.UTC(year, m))));
+};
+const validationMessages = (locale, month, daysInMonth) => ({
+  dd: locale.numeralDate.validation.day(month ? getMonthsForLocale(locale.locale())[+month - 1] : undefined, daysInMonth),
+  mm: locale.numeralDate.validation.month(),
+  yyyy: locale.numeralDate.validation.year()
+});
+const getDaysInMonth = (month, year) => {
+  if (month && (+month > 12 || +month < 1)) {
+    return 31;
+  }
+  const currentDate = new Date();
+  const computedYear = +(year || currentDate.getFullYear());
+  const computedMonth = +(month || currentDate.getMonth() + 1);
+
+  // passing 0 as the third argument ensures we handle for months being 0 indexed
+  return new Date(computedYear, computedMonth, 0).getDate();
+};
+const validate = (locale, {
+  dd,
+  mm,
+  yyyy
+}) => {
+  const failed = {
+    dd: "",
+    mm: "",
+    yyyy: ""
+  };
+  const daysInMonth = getDaysInMonth(mm, yyyy);
+  if (dd && (+dd > daysInMonth || +dd < 1)) {
+    failed.dd = validationMessages(locale, mm, String(daysInMonth)).dd;
+  }
+  if (mm && (+mm > 12 || +mm < 1)) {
+    failed.mm = validationMessages(locale).mm;
+  }
+  if (yyyy && (+yyyy < 1800 || +yyyy > 2200)) {
+    failed.yyyy = validationMessages(locale).yyyy;
+  }
+  return failed;
 };
 const getDateLabel = (datePart, locale) => {
   switch (datePart) {
@@ -108,11 +147,6 @@ const NumeralDate = ({
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
   }, [value]);
-  const validationMessages = {
-    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, ""])))
   });
@@ -146,15 +180,13 @@ const NumeralDate = ({
       }
     }
   };
-  const handleBlur = datePart => {
+  const handleBlur = () => {
     const internalValidationEnabled = enableInternalError || enableInternalWarning;
     /* istanbul ignore else */
     if (internalValidationEnabled) {
-      const newDatePart = dateValue[datePart];
-      const errorMessage = validations[datePart](newDatePart) ? "" : validationMessages[datePart];
       setInternalMessages(prev => ({
         ...prev,
-        [datePart]: errorMessage
+        ...validate(locale, dateValue)
       }));
     }
     setTimeout(() => {
@@ -248,6 +280,7 @@ const NumeralDate = ({
       readOnly: readOnly,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
+      onBlur: handleBlur,
       ref: element => {
         refs.current[index] = element;
         if (!inputRef) {
@@ -259,7 +292,6 @@ const NumeralDate = ({
           inputRef.current = element;
         }
       },
-      onBlur: () => handleBlur(datePart),
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info

package/lib/components/popover-container/popover-container.component.d.ts

@@ -55,6 +55,8 @@ export interface PopoverContainerProps extends PaddingProps {
     closeButtonAriaLabel?: string;
     /** Container aria label */
     containerAriaLabel?: string;
+    /** Disables the animation for the component */
+    disableAnimation?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
 export default PopoverContainer;

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _dom = require("@floating-ui/dom");
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
 var _popoverContainer = require("./popover-container.style");
 var _icon = _interopRequireDefault(require("../icon"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
@@ -78,6 +79,7 @@ const PopoverContainer = ({
   openButtonAriaLabel,
   closeButtonAriaLabel = "close",
   containerAriaLabel,
+  disableAnimation = false,
   ...rest
 }) => {
   const isControlled = open !== undefined;
@@ -89,6 +91,7 @@ const PopoverContainer = ({
   const popoverContentNodeRef = (0, _react.useRef)(null);
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   (0, _react.useEffect)(() => {
     if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
   }, [isOpen]);
@@ -158,6 +161,7 @@ const PopoverContainer = ({
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
   }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end"
   }, shouldCoverButton && {
@@ -170,7 +174,8 @@ const PopoverContainer = ({
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
-    ref: popoverContentNodeRef
+    ref: popoverContentNodeRef,
+    disableAnimation: disableAnimation || reduceMotion
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"

package/lib/components/popover-container/popover-container.style.d.ts

@@ -4,6 +4,7 @@ declare const PopoverContainerWrapperStyle: import("styled-components").StyledCo
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;
+    disableAnimation?: boolean;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
 declare type AdditionalIconButtonProps = {

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

@@ -10,6 +10,33 @@ var _themes = require("../../style/themes");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function animationToRender({
+  animationState,
+  disableAnimation
+}) {
+  if (disableAnimation) return "opacity: 1;";
+  switch (animationState) {
+    case "entering":
+      return `
+        opacity: 0;
+        transform: translateY(-8px);
+      `;
+    case "entered":
+      return `
+        opacity: 1; 
+        transform: translateY(0);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    case "exiting":
+      return `
+        opacity: 0; 
+        transform: translateY(-8px);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    default:
+      return "opacity: 0;";
+  }
+}
 const PopoverContainerWrapperStyle = exports.PopoverContainerWrapperStyle = _styledComponents.default.div`
   position: relative;
   display: inline-block;
@@ -32,31 +59,7 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  animationState
-}) => {
-  switch (animationState) {
-    case "entering":
-      return `
-        opacity: 0;
-        transform: translateY(-8px);
-      `;
-    case "entered":
-      return `
-        opacity: 1; 
-        transform: translateY(0);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    case "exiting":
-      return `
-        opacity: 0; 
-        transform: translateY(-8px);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    default:
-      return "opacity: 0";
-  }
-}}
+  ${animationToRender}
 `;
 const PopoverContainerOpenIcon = exports.PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {

package/lib/locales/__internal__/pl-pl.js

@@ -133,7 +133,12 @@ const plPL = {
   },
   numeralDate: {
     validation: {
-      day: () => "Dzień musi być liczbą w zakresie 1-31.",
+      day: (month, daysInMonth) => {
+        if (month && daysInMonth) {
+          return `Dzień W ${month} musi być liczbą zakresie 1-${daysInMonth}.`;
+        }
+        return "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."
     },

package/lib/locales/en-gb.js

@@ -97,7 +97,12 @@ const enGB = {
   },
   numeralDate: {
     validation: {
-      day: () => "Day should be a number within a 1-31 range.",
+      day: (month, daysInMonth) => {
+        if (month && daysInMonth) {
+          return `Day in ${month} should be a number within 1-${daysInMonth}.`;
+        }
+        return "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."
     },

package/lib/locales/locale.d.ts

@@ -74,7 +74,7 @@ interface Locale {
     };
     numeralDate: {
         validation: {
-            day: () => string;
+            day: (month?: string, daysInMonth?: string) => string;
             month: () => string;
             year: () => string;
         };

package/package.json

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