carbon-react 106.1.5 → 106.2.0

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

@@ -1,39 +1,107 @@
-// The order of this array is important
-const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important
+// The order of this array is important, when an input value matches more than one format the last one is used
+const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important, when an input value matches more than one format the last one is used
 
-const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"];
+const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"]; // The order of this array is important, when an input value matches more than one format the last one is used
+
+const CN_FORMATS = ["yyyy M", "yyyy M d", "yyyy MM d", "yyyy M dd", "yyyy MM dd", "yy M", "yy MM", "yy M d", "yy MM d", "yy M dd", "yy MM dd", "M", "M d", "MM", "M dd", "MM d", "MM dd"];
 const SEPARATORS = ["", ".", ",", "-", "/", ":"];
+const STANDARD_FORMAT_LENGTH = 10;
+
+const generateFormats = (formatArray, separator, trailingChar) => {
+  const separators = SEPARATORS.includes(separator) ? SEPARATORS : [...SEPARATORS, separator];
+  return formatArray.reduce((arr, formatString) => {
+    const array = [...arr, formatString];
+
+    if (formatString.includes(" ")) {
+      separators.forEach(char => {
+        if (separator === char && trailingChar) {
+          array.push(`${formatString.replace(/ /g, char)}${trailingChar}`);
+        }
+
+        array.push(formatString.replace(/ /g, char));
+      });
+    }
+
+    return array;
+  }, []);
+};
+
+const getOutputFormatForLocale = localeCode => {
+  const formatMap = {
+    day: "dd",
+    month: "MM",
+    year: "yyyy"
+  };
+  const formatter = new Intl.DateTimeFormat(localeCode);
+  let separator;
+  const format = formatter.formatToParts(new Date()).map(({
+    type,
+    value
+  }) => {
+    if (type !== "literal") {
+      return formatMap[type];
+    }
+
+    if (!separator) {
+      separator = value;
+    }
+
+    return value;
+  }).join("");
+
+  if (localeCode.startsWith("bg")) {
+    // this locale adds an additional char that has no effect on the output formatting
+    return {
+      format: format.substring(0, STANDARD_FORMAT_LENGTH),
+      separator
+    };
+  }
 
-const generateFormats = formatArray => formatArray.reduce((arr, formatString) => {
-  const array = [...arr, formatString];
+  return {
+    format,
+    separator
+  };
+};
 
-  if (formatString.includes(" ")) {
-    SEPARATORS.forEach(char => array.push(formatString.replace(/ /g, char)));
+const getInputFormatsArrayForLocale = format => {
+  if (format.startsWith("y")) {
+    return CN_FORMATS;
   }
 
-  return array;
-}, []);
+  if (format.startsWith("M")) {
+    return NA_FORMATS;
+  }
+
+  return EU_FORMATS;
+}; // we need this to handle for formats that add extra chars at the end of the format
+
+
+const getTrailingChar = format => {
+  const lastChar = format.split("").pop();
+  return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
+};
 
 const getFormatData = ({
   code
 }) => {
   if (["en-CA", "en-US"].includes(code)) {
+    const format = "MM/dd/yyyy";
+    const formats = getInputFormatsArrayForLocale(format);
     return {
-      format: "MM/dd/yyyy",
-      formats: generateFormats(NA_FORMATS)
-    };
-  }
-
-  if (code === "de") {
-    return {
-      format: "dd.MM.yyyy",
-      formats: generateFormats(EU_FORMATS)
+      format,
+      formats: generateFormats(formats, "/")
     };
   }
 
+  const {
+    format,
+    separator
+  } = getOutputFormatForLocale(code);
+  const outputFormat = ["fr-CA", "en-ZA", "ar-EG"].includes(code) ? "dd/MM/yyyy" : format;
+  const formatsForLocale = getInputFormatsArrayForLocale(outputFormat);
   return {
-    format: "dd/MM/yyyy",
-    formats: generateFormats(EU_FORMATS)
+    format: outputFormat,
+    formats: generateFormats(formatsForLocale, separator, getTrailingChar(format))
   };
 };
 

package/esm/components/date/__internal__/utils.js

@@ -28,21 +28,31 @@ function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   return formatString.length === valueString.length && isMatch(formatString, valueString);
 }
 
+const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
 export function additionalYears(formatString, value) {
   if (formatString.split("y").length - 1 !== 2) {
     return [formatString, value];
   }
 
-  let year = value.substring(value.length - 2);
-  const dayAndMonth = value.substring(0, value.length - 2);
+  const formatStartWithYear = formatString.startsWith("yy");
+  const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
+  const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
+  const dayAndMonthStringStartIndex = formatStartWithYear ? yearStringEndIndex : 0;
+  const dayAndMonthStringEndIndex = formatStartWithYear ? value.length : value.length - 2;
+  let year = value.substring(yearStringStartIndex, yearStringEndIndex);
+  const dayAndMonth = value.substring(dayAndMonthStringStartIndex, dayAndMonthStringEndIndex);
   const yearAsNumber = Number(year);
 
-  if (yearAsNumber < 69) {
+  if (yearAsNumber < THRESHOLD_FOR_ADDITIONAL_YEARS) {
     year = String(2000 + yearAsNumber);
   } else {
     year = String(1900 + yearAsNumber);
   }
 
+  if (formatStartWithYear) {
+    return [`yyyy${formatString.substring(2, formatString.length)}`, `${year}${dayAndMonth}`];
+  }
+
   return [`${formatString.substring(0, formatString.length - 2)}yyyy`, `${dayAndMonth}${year}`];
 }
 

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

@@ -72,7 +72,7 @@ const DateInput = ({
     } = ev.target;
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(ev.target.value, formats);
     const formattedValueString = ev.type === "blur" ? formattedValue(format, selectedDays) : ev.target.value;
-    const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(matchedFormat, matchedValue) : computeInvalidRawValue(ev.target.value);
+    const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(...additionalYears(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
     ev.target = { ...(name && {
         name
       }),
@@ -195,7 +195,9 @@ const DateInput = ({
       return;
     }
 
-    isBlurBlocked.current = true;
+    if (setInputRefMap) {
+      isBlurBlocked.current = true;
+    }
 
     if (ev.target.type === "text" && !open) {
       setOpen(true);
@@ -205,6 +207,11 @@ const DateInput = ({
     }
   };
 
+  const handleIconMouseDown = e => {
+    isBlurBlocked.current = true;
+    handleMouseDown(e);
+  };
+
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
   };
@@ -247,7 +254,7 @@ const DateInput = ({
 
     if (matchedFormat && matchedValue && isDateValid(parseDate(matchedFormat, matchedValue))) {
       setSelectedDays(parseDate(...additionalYears(matchedFormat, matchedValue)));
-    } else if (checkISOFormatAndLength(value)) {
+    } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
       setSelectedDays(parseISODate(value));
     } else {
       setSelectedDays(undefined);
@@ -255,7 +262,7 @@ const DateInput = ({
   }, [value, formats]);
 
   const computedValue = () => {
-    if (checkISOFormatAndLength(value)) {
+    if (checkISOFormatAndLength(value) && isInitialValue.current) {
       return formattedValue(format, parseISODate(value));
     }
 
@@ -265,6 +272,7 @@ const DateInput = ({
     const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
 
     if (isInitialValue.current && valueSeparator !== formatSeparator && isDateValid(parseDate(format, replaceSeparators()))) {
+      isInitialValue.current = false;
       const [matchedFormat, matchedValue] = findMatchedFormatAndValue(replaceSeparators(), formats);
       return formattedValue(format, parseDate(...additionalYears(matchedFormat, matchedValue)));
     }
@@ -289,7 +297,7 @@ const DateInput = ({
     onKeyDown: handleKeyDown,
     iconOnClick: handleClick,
     onMouseDown: handleMouseDown,
-    iconOnMouseDown: handleMouseDown,
+    iconOnMouseDown: handleIconMouseDown,
     inputIcon: "calendar",
     labelInline: labelInline,
     inputRef: assignInput,

package/esm/components/flat-table/flat-table.style.js

@@ -75,7 +75,7 @@ const StyledFlatTable = styled.table`
       ${StyledFlatTableRow}:hover {
         ${StyledFlatTableCell},
         ${StyledFlatTableRowHeader},
-        ${StyledFlatTableCheckbox} {
+        ${StyledFlatTableCheckbox}:not(th) {
           background-color: var(--colorsUtilityMajor025);
         }
       }
@@ -198,6 +198,7 @@ const StyledFlatTableFooter = styled.div`
 }) => hasStickyFooter && css`
       position: sticky;
       bottom: 0px;
+      z-index: ${baseTheme.zIndex.overlay + 1};
     `}
 `;
 export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer };

package/esm/components/typography/typography.component.js

@@ -108,7 +108,6 @@ const getWeight = variant => {
     case "h1":
     case "segment-header":
     case "segment-header-small":
-    case "strong":
       return "900";
 
     case "h2":
@@ -117,6 +116,7 @@ const getWeight = variant => {
     case "segment-subheader-alt":
     case "b":
     case "em":
+    case "strong":
       return "700";
 
     case "h4":

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

@@ -4,42 +4,110 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-// The order of this array is important
-const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important
+// The order of this array is important, when an input value matches more than one format the last one is used
+const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important, when an input value matches more than one format the last one is used
 
-const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"];
+const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"]; // The order of this array is important, when an input value matches more than one format the last one is used
+
+const CN_FORMATS = ["yyyy M", "yyyy M d", "yyyy MM d", "yyyy M dd", "yyyy MM dd", "yy M", "yy MM", "yy M d", "yy MM d", "yy M dd", "yy MM dd", "M", "M d", "MM", "M dd", "MM d", "MM dd"];
 const SEPARATORS = ["", ".", ",", "-", "/", ":"];
+const STANDARD_FORMAT_LENGTH = 10;
+
+const generateFormats = (formatArray, separator, trailingChar) => {
+  const separators = SEPARATORS.includes(separator) ? SEPARATORS : [...SEPARATORS, separator];
+  return formatArray.reduce((arr, formatString) => {
+    const array = [...arr, formatString];
+
+    if (formatString.includes(" ")) {
+      separators.forEach(char => {
+        if (separator === char && trailingChar) {
+          array.push(`${formatString.replace(/ /g, char)}${trailingChar}`);
+        }
+
+        array.push(formatString.replace(/ /g, char));
+      });
+    }
+
+    return array;
+  }, []);
+};
+
+const getOutputFormatForLocale = localeCode => {
+  const formatMap = {
+    day: "dd",
+    month: "MM",
+    year: "yyyy"
+  };
+  const formatter = new Intl.DateTimeFormat(localeCode);
+  let separator;
+  const format = formatter.formatToParts(new Date()).map(({
+    type,
+    value
+  }) => {
+    if (type !== "literal") {
+      return formatMap[type];
+    }
+
+    if (!separator) {
+      separator = value;
+    }
+
+    return value;
+  }).join("");
+
+  if (localeCode.startsWith("bg")) {
+    // this locale adds an additional char that has no effect on the output formatting
+    return {
+      format: format.substring(0, STANDARD_FORMAT_LENGTH),
+      separator
+    };
+  }
 
-const generateFormats = formatArray => formatArray.reduce((arr, formatString) => {
-  const array = [...arr, formatString];
+  return {
+    format,
+    separator
+  };
+};
 
-  if (formatString.includes(" ")) {
-    SEPARATORS.forEach(char => array.push(formatString.replace(/ /g, char)));
+const getInputFormatsArrayForLocale = format => {
+  if (format.startsWith("y")) {
+    return CN_FORMATS;
   }
 
-  return array;
-}, []);
+  if (format.startsWith("M")) {
+    return NA_FORMATS;
+  }
+
+  return EU_FORMATS;
+}; // we need this to handle for formats that add extra chars at the end of the format
+
+
+const getTrailingChar = format => {
+  const lastChar = format.split("").pop();
+  return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
+};
 
 const getFormatData = ({
   code
 }) => {
   if (["en-CA", "en-US"].includes(code)) {
+    const format = "MM/dd/yyyy";
+    const formats = getInputFormatsArrayForLocale(format);
     return {
-      format: "MM/dd/yyyy",
-      formats: generateFormats(NA_FORMATS)
-    };
-  }
-
-  if (code === "de") {
-    return {
-      format: "dd.MM.yyyy",
-      formats: generateFormats(EU_FORMATS)
+      format,
+      formats: generateFormats(formats, "/")
     };
   }
 
+  const {
+    format,
+    separator
+  } = getOutputFormatForLocale(code);
+  const outputFormat = ["fr-CA", "en-ZA", "ar-EG"].includes(code) ? "dd/MM/yyyy" : format;
+  const formatsForLocale = getInputFormatsArrayForLocale(outputFormat);
   return {
-    format: "dd/MM/yyyy",
-    formats: generateFormats(EU_FORMATS)
+    format: outputFormat,
+    formats: generateFormats(formatsForLocale, separator, getTrailingChar(format))
   };
 };
 

package/lib/components/date/__internal__/utils.js

@@ -48,21 +48,32 @@ function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   return formatString.length === valueString.length && (0, _fp.isMatch)(formatString, valueString);
 }
 
+const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
+
 function additionalYears(formatString, value) {
   if (formatString.split("y").length - 1 !== 2) {
     return [formatString, value];
   }
 
-  let year = value.substring(value.length - 2);
-  const dayAndMonth = value.substring(0, value.length - 2);
+  const formatStartWithYear = formatString.startsWith("yy");
+  const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
+  const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
+  const dayAndMonthStringStartIndex = formatStartWithYear ? yearStringEndIndex : 0;
+  const dayAndMonthStringEndIndex = formatStartWithYear ? value.length : value.length - 2;
+  let year = value.substring(yearStringStartIndex, yearStringEndIndex);
+  const dayAndMonth = value.substring(dayAndMonthStringStartIndex, dayAndMonthStringEndIndex);
   const yearAsNumber = Number(year);
 
-  if (yearAsNumber < 69) {
+  if (yearAsNumber < THRESHOLD_FOR_ADDITIONAL_YEARS) {
     year = String(2000 + yearAsNumber);
   } else {
     year = String(1900 + yearAsNumber);
   }
 
+  if (formatStartWithYear) {
+    return [`yyyy${formatString.substring(2, formatString.length)}`, `${year}${dayAndMonth}`];
+  }
+
   return [`${formatString.substring(0, formatString.length - 2)}yyyy`, `${dayAndMonth}${year}`];
 }
 

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

@@ -97,7 +97,7 @@ const DateInput = ({
     } = ev.target;
     const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(ev.target.value, formats);
     const formattedValueString = ev.type === "blur" ? (0, _utils.formattedValue)(format, selectedDays) : ev.target.value;
-    const rawValue = (0, _utils.isDateValid)((0, _utils.parseDate)(matchedFormat, matchedValue)) ? (0, _utils.formatToISO)(matchedFormat, matchedValue) : computeInvalidRawValue(ev.target.value);
+    const rawValue = (0, _utils.isDateValid)((0, _utils.parseDate)(matchedFormat, matchedValue)) ? (0, _utils.formatToISO)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
     ev.target = { ...(name && {
         name
       }),
@@ -220,7 +220,9 @@ const DateInput = ({
       return;
     }
 
-    isBlurBlocked.current = true;
+    if (setInputRefMap) {
+      isBlurBlocked.current = true;
+    }
 
     if (ev.target.type === "text" && !open) {
       setOpen(true);
@@ -230,6 +232,11 @@ const DateInput = ({
     }
   };
 
+  const handleIconMouseDown = e => {
+    isBlurBlocked.current = true;
+    handleMouseDown(e);
+  };
+
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
   };
@@ -272,7 +279,7 @@ const DateInput = ({
 
     if (matchedFormat && matchedValue && (0, _utils.isDateValid)((0, _utils.parseDate)(matchedFormat, matchedValue))) {
       setSelectedDays((0, _utils.parseDate)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)));
-    } else if ((0, _utils.checkISOFormatAndLength)(value)) {
+    } else if ((0, _utils.checkISOFormatAndLength)(value) && isInitialValue.current) {
       setSelectedDays((0, _utils.parseISODate)(value));
     } else {
       setSelectedDays(undefined);
@@ -280,7 +287,7 @@ const DateInput = ({
   }, [value, formats]);
 
   const computedValue = () => {
-    if ((0, _utils.checkISOFormatAndLength)(value)) {
+    if ((0, _utils.checkISOFormatAndLength)(value) && isInitialValue.current) {
       return (0, _utils.formattedValue)(format, (0, _utils.parseISODate)(value));
     }
 
@@ -290,6 +297,7 @@ const DateInput = ({
     const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
 
     if (isInitialValue.current && valueSeparator !== formatSeparator && (0, _utils.isDateValid)((0, _utils.parseDate)(format, replaceSeparators()))) {
+      isInitialValue.current = false;
       const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(replaceSeparators(), formats);
       return (0, _utils.formattedValue)(format, (0, _utils.parseDate)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)));
     }
@@ -314,7 +322,7 @@ const DateInput = ({
     onKeyDown: handleKeyDown,
     iconOnClick: handleClick,
     onMouseDown: handleMouseDown,
-    iconOnMouseDown: handleMouseDown,
+    iconOnMouseDown: handleIconMouseDown,
     inputIcon: "calendar",
     labelInline: labelInline,
     inputRef: assignInput,

package/lib/components/flat-table/flat-table.style.js

@@ -99,7 +99,7 @@ const StyledFlatTable = _styledComponents.default.table`
       ${_flatTableRow.default}:hover {
         ${_flatTableCell.StyledFlatTableCell},
         ${_flatTableRowHeader.StyledFlatTableRowHeader},
-        ${_flatTableCheckbox.default} {
+        ${_flatTableCheckbox.default}:not(th) {
           background-color: var(--colorsUtilityMajor025);
         }
       }
@@ -224,6 +224,7 @@ const StyledFlatTableFooter = _styledComponents.default.div`
 }) => hasStickyFooter && (0, _styledComponents.css)`
       position: sticky;
       bottom: 0px;
+      z-index: ${_themes.baseTheme.zIndex.overlay + 1};
     `}
 `;
 exports.StyledFlatTableFooter = StyledFlatTableFooter;

package/lib/components/typography/typography.component.js

@@ -126,7 +126,6 @@ const getWeight = variant => {
     case "h1":
     case "segment-header":
     case "segment-header-small":
-    case "strong":
       return "900";
 
     case "h2":
@@ -135,6 +134,7 @@ const getWeight = variant => {
     case "segment-subheader-alt":
     case "b":
     case "em":
+    case "strong":
       return "700";
 
     case "h4":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.1.5",
+  "version": "106.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {