carbon-react 144.5.0 → 144.7.0

package/esm/components/date/__internal__/date-formats/index.d.ts

@@ -3,5 +3,5 @@ interface LocaleFormats {
     formats: string[];
     format: string;
 }
-declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
+declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
 export default getFormatData;

package/esm/components/date/__internal__/date-formats/index.js

@@ -72,7 +72,31 @@ const getTrailingChar = format => {
 };
 const getFormatData = ({
   code = "en-GB"
-}) => {
+}, dateFormatOverride) => {
+  if (dateFormatOverride) {
+    const {
+      format
+    } = getOutputFormatForLocale(code);
+    let formatFromLocale;
+    switch (code) {
+      case "en-CA":
+      case "en-US":
+        formatFromLocale = "MM/dd/yyyy";
+        break;
+      case "ar-EG":
+      case "en-ZA":
+      case "fr-CA":
+        formatFromLocale = "dd/MM/yyyy";
+        break;
+      default:
+        formatFromLocale = format;
+    }
+    const formatsForLocale = getInputFormatsArrayForLocale(formatFromLocale);
+    return {
+      format: dateFormatOverride,
+      formats: generateFormats(formatsForLocale, "/")
+    };
+  }
   if (["en-CA", "en-US"].includes(code)) {
     const format = "MM/dd/yyyy";
     const formats = getInputFormatsArrayForLocale(format);

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

@@ -42,6 +42,8 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
     onPickerOpen?: () => void;
     /** Callback triggered when the picker is closed */
     onPickerClose?: () => void;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

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

@@ -52,12 +52,13 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const blockClose = useRef(false);
   const locale = useLocale();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = locale.date;
   const {
     format,
     formats
-  } = useMemo(() => getFormatData(dateFnsLocale()), [dateFnsLocale]);
+  } = useMemo(() => getFormatData(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const {
     inputRefMap,
     setInputRefMap
@@ -480,6 +481,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "datatype": PropTypes.string,
+    "dateFormatOverride": PropTypes.string,
     "defaultChecked": PropTypes.bool,
     "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
     "dir": PropTypes.string,

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

@@ -85,6 +85,8 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     required?: boolean;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateRange: {
     ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;

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

@@ -35,11 +35,12 @@ export const DateRange = ({
   const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = useLocale();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = l.date;
   const {
     format
-  } = useMemo(() => getFormatData(dateFnsLocale()), [dateFnsLocale]);
+  } = useMemo(() => getFormatData(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const inlineLabelWidth = 40;
   const [lastChangedDate, setLastChangedDate] = useState("");
   const computedValue = useCallback(valueString => {

package/esm/components/message/message.component.js

@@ -1,6 +1,7 @@
 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, { useRef } from "react";
 import PropTypes from "prop-types";
+import Typography from "../typography";
 import MessageStyle from "./message.style";
 import TypeIcon from "./__internal__/type-icon/type-icon.component";
 import MessageContent from "./__internal__/message-content/message-content.component";
@@ -47,7 +48,9 @@ const Message = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement(TypeIcon, {
     variant: variant,
     transparent: transparent
-  }), /*#__PURE__*/React.createElement(MessageContent, {
+  }), /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true
+  }, l.message[variant]()), /*#__PURE__*/React.createElement(MessageContent, {
     showCloseIcon: showCloseIcon,
     title: title,
     reduceLeftPadding: transparent

package/esm/locales/de-de.js

@@ -100,7 +100,12 @@ const deDE = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Schließen"
+    closeButtonAriaLabel: () => "Schließen",
+    error: () => "Fehler",
+    info: () => "Informationen",
+    success: () => "Erfolg",
+    warning: () => "Warnung",
+    neutral: () => "Informationen"
   },
   numeralDate: {
     validation: {

package/esm/locales/en-gb.js

@@ -34,7 +34,8 @@ const enGB = {
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"
-    }
+    },
+    dateFormatOverride: undefined
   },
   dialog: {
     ariaLabels: {
@@ -103,7 +104,12 @@ const enGB = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Close"
+    closeButtonAriaLabel: () => "Close",
+    error: () => "Error",
+    info: () => "Information",
+    success: () => "Success",
+    warning: () => "Warning",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/esm/locales/es-es.js

@@ -101,7 +101,12 @@ const esES = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Cerrar"
+    closeButtonAriaLabel: () => "Cerrar",
+    error: () => "Error",
+    info: () => "Información",
+    success: () => "Acción realizada",
+    warning: () => "Aviso",
+    neutral: () => "Información"
   },
   numeralDate: {
     validation: {

package/esm/locales/fr-ca.js

@@ -101,7 +101,12 @@ const frCA = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Fermer"
+    closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Opération réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/esm/locales/fr-fr.js

@@ -101,7 +101,12 @@ const frFR = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Fermer"
+    closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Action réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/esm/locales/locale.d.ts

@@ -34,6 +34,7 @@ interface Locale {
             previousMonthButton: () => string;
             nextMonthButton: () => string;
         };
+        dateFormatOverride?: string;
     };
     dialog: {
         ariaLabels: {
@@ -87,6 +88,11 @@ interface Locale {
     };
     message: {
         closeButtonAriaLabel: () => string;
+        error: () => string;
+        info: () => string;
+        success: () => string;
+        warning: () => string;
+        neutral: () => string;
     };
     numeralDate: {
         validation: {

package/lib/components/date/__internal__/date-formats/index.d.ts

@@ -3,5 +3,5 @@ interface LocaleFormats {
     formats: string[];
     format: string;
 }
-declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
+declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
 export default getFormatData;

package/lib/components/date/__internal__/date-formats/index.js

@@ -78,7 +78,31 @@ const getTrailingChar = format => {
 };
 const getFormatData = ({
   code = "en-GB"
-}) => {
+}, dateFormatOverride) => {
+  if (dateFormatOverride) {
+    const {
+      format
+    } = getOutputFormatForLocale(code);
+    let formatFromLocale;
+    switch (code) {
+      case "en-CA":
+      case "en-US":
+        formatFromLocale = "MM/dd/yyyy";
+        break;
+      case "ar-EG":
+      case "en-ZA":
+      case "fr-CA":
+        formatFromLocale = "dd/MM/yyyy";
+        break;
+      default:
+        formatFromLocale = format;
+    }
+    const formatsForLocale = getInputFormatsArrayForLocale(formatFromLocale);
+    return {
+      format: dateFormatOverride,
+      formats: generateFormats(formatsForLocale, "/")
+    };
+  }
   if (["en-CA", "en-US"].includes(code)) {
     const format = "MM/dd/yyyy";
     const formats = getInputFormatsArrayForLocale(format);

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

@@ -42,6 +42,8 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
     onPickerOpen?: () => void;
     /** Callback triggered when the picker is closed */
     onPickerClose?: () => void;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

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

@@ -61,12 +61,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = locale.date;
   const {
     format,
     formats
-  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const {
     inputRefMap,
     setInputRefMap
@@ -489,6 +490,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,
+    "dateFormatOverride": _propTypes.default.string,
     "defaultChecked": _propTypes.default.bool,
     "defaultValue": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
     "dir": _propTypes.default.string,

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

@@ -85,6 +85,8 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     required?: boolean;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateRange: {
     ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;

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

@@ -44,11 +44,12 @@ const DateRange = ({
   const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = (0, _useLocale.default)();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = l.date;
   const {
     format
-  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const inlineLabelWidth = 40;
   const [lastChangedDate, setLastChangedDate] = (0, _react.useState)("");
   const computedValue = (0, _react.useCallback)(valueString => {

package/lib/components/message/message.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Message = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _typography = _interopRequireDefault(require("../typography"));
 var _message = _interopRequireDefault(require("./message.style"));
 var _typeIcon = _interopRequireDefault(require("./__internal__/type-icon/type-icon.component"));
 var _messageContent = _interopRequireDefault(require("./__internal__/message-content/message-content.component"));
@@ -56,7 +57,9 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
   }), /*#__PURE__*/_react.default.createElement(_typeIcon.default, {
     variant: variant,
     transparent: transparent
-  }), /*#__PURE__*/_react.default.createElement(_messageContent.default, {
+  }), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true
+  }, l.message[variant]()), /*#__PURE__*/_react.default.createElement(_messageContent.default, {
     showCloseIcon: showCloseIcon,
     title: title,
     reduceLeftPadding: transparent

package/lib/locales/de-de.js

@@ -107,7 +107,12 @@ const deDE = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Schließen"
+    closeButtonAriaLabel: () => "Schließen",
+    error: () => "Fehler",
+    info: () => "Informationen",
+    success: () => "Erfolg",
+    warning: () => "Warnung",
+    neutral: () => "Informationen"
   },
   numeralDate: {
     validation: {

package/lib/locales/en-gb.js

@@ -41,7 +41,8 @@ const enGB = {
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"
-    }
+    },
+    dateFormatOverride: undefined
   },
   dialog: {
     ariaLabels: {
@@ -110,7 +111,12 @@ const enGB = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Close"
+    closeButtonAriaLabel: () => "Close",
+    error: () => "Error",
+    info: () => "Information",
+    success: () => "Success",
+    warning: () => "Warning",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/lib/locales/es-es.js

@@ -108,7 +108,12 @@ const esES = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Cerrar"
+    closeButtonAriaLabel: () => "Cerrar",
+    error: () => "Error",
+    info: () => "Información",
+    success: () => "Acción realizada",
+    warning: () => "Aviso",
+    neutral: () => "Información"
   },
   numeralDate: {
     validation: {

package/lib/locales/fr-ca.js

@@ -108,7 +108,12 @@ const frCA = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Fermer"
+    closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Opération réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/lib/locales/fr-fr.js

@@ -108,7 +108,12 @@ const frFR = {
     }
   },
   message: {
-    closeButtonAriaLabel: () => "Fermer"
+    closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Action réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information"
   },
   numeralDate: {
     validation: {

package/lib/locales/locale.d.ts

@@ -34,6 +34,7 @@ interface Locale {
             previousMonthButton: () => string;
             nextMonthButton: () => string;
         };
+        dateFormatOverride?: string;
     };
     dialog: {
         ariaLabels: {
@@ -87,6 +88,11 @@ interface Locale {
     };
     message: {
         closeButtonAriaLabel: () => string;
+        error: () => string;
+        info: () => string;
+        success: () => string;
+        warning: () => string;
+        neutral: () => string;
     };
     numeralDate: {
         validation: {

package/package.json

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