carbon-react 111.12.3 → 111.12.5

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import DayPicker from "react-day-picker";
@@ -52,27 +53,31 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   } : {
     width: "abbreviated"
   }).substring(0, 3)), [l, localize]);
+
   const handleDayClick = (date, {
     disabled
   }, ev) => {
     if (!disabled) {
       var _inputElement$current;
+
       const {
         id,
         name
       } = inputElement === null || inputElement === void 0 ? void 0 : (_inputElement$current = inputElement.current) === null || _inputElement$current === void 0 ? void 0 : _inputElement$current.firstChild;
-      ev.target = {
-        ...ev.target,
+      ev.target = { ...ev.target,
         id,
         name
       };
       onDayClick(date, ev);
     }
   };
+
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
+
   if (!open) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
@@ -112,20 +117,28 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
 DatePicker.propTypes = {
   /** Minimum possible date */
   minDate: PropTypes.string,
+
   /** Maximum possible date */
   maxDate: PropTypes.string,
+
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: PropTypes.bool,
+
   /** Element that the DatePicker will be displayed under */
   inputElement: PropTypes.object.isRequired,
+
   /** Currently selected date */
   selectedDays: PropTypes.instanceOf(Date),
+
   /** Callback to set selected date */
   onDayClick: PropTypes.func,
+
   /** Pass any props that match the DayPickerProps interface to override default behaviors */
   pickerProps: PropTypes.object,
+
   /** Callback to handle mousedown event on picker */
   pickerMouseDown: PropTypes.func,
+
   /** Sets whether the picker should be displayed */
   open: PropTypes.bool
 };

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -1,7 +1,6 @@
 import styled from "styled-components";
-import baseTheme from "../../../../style/themes/base";
+import baseTheme from "../../../../style/themes/base"; // Styles copied from https://github.com/gpbl/react-day-picker/blob/v6.1.1/src/style.css
 
-// Styles copied from https://github.com/gpbl/react-day-picker/blob/v6.1.1/src/style.css
 const addReactDayPickerStyles = () => `
   .DayPicker {
     display: inline-block;
@@ -175,6 +174,7 @@ const addReactDayPickerStyles = () => `
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
   }
 `;
+
 const StyledDayPicker = styled.div`
   ${addReactDayPickerStyles}
 
@@ -285,9 +285,13 @@ const StyledDayPicker = styled.div`
 
   .DayPicker-Day--disabled,
   .DayPicker-Day--disabled:hover {
-    color: var(colorsActionMajorYin030);
+    color: var(--colorsActionMajorYin030);
     background-color: var(--colorsUtilityYang100);
     cursor: default;
+
+    &.DayPicker-Day--today {
+      background-color: var(--colorsActionMinor200);
+    }
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {

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

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import StyledButton from "./button.style";
 import StyledNavbar from "./navbar.style";
 import Icon from "../../../icon";
+
 const Navbar = ({
   onPreviousClick,
   onNextClick,
@@ -16,6 +17,7 @@ const Navbar = ({
 }, /*#__PURE__*/React.createElement(Icon, {
   type: "chevron_right"
 })));
+
 Navbar.propTypes = {
   onPreviousClick: PropTypes.func,
   onNextClick: PropTypes.func

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

@@ -5,9 +5,11 @@ export function parseDate(formatString, valueString) {
 }
 export function formatToISO(formatString, valueString) {
   const dateValue = parseDate(formatString, valueString);
+
   if (!isDateValid(dateValue)) {
     return null;
   }
+
   return formatISO(dateValue).split("T")[0];
 }
 export function formattedValue(formatString, value) {
@@ -16,6 +18,7 @@ export function formattedValue(formatString, value) {
 export function isDateValid(date) {
   return date && date.toString() !== "Invalid Date";
 }
+
 function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   if (formatString.includes("d")) {
     return formatString.length === valueString.length && isMatch(fullFormat.join("."), fullValue.join(".")) // need to check day value with month value
@@ -24,11 +27,13 @@ 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];
   }
+
   const formatStartWithYear = formatString.startsWith("yy");
   const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
   const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
@@ -37,44 +42,57 @@ export function additionalYears(formatString, value) {
   let year = value.substring(yearStringStartIndex, yearStringEndIndex);
   const dayAndMonth = value.substring(dayAndMonthStringStartIndex, dayAndMonthStringEndIndex);
   const yearAsNumber = Number(year);
+
   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}`];
 }
+
 function makeSeparatedValues(arr, str) {
   return arr.map((_, i) => str.substring(arr[i], arr[i + 1]));
 }
+
 function checkForCompleteMatch(formatArray, valueArray) {
   return formatArray.every((formatString, i) => hasMatchedFormat(formatString, valueArray[i], formatArray, valueArray));
 }
+
 function findMatchWithNoSeparators(valueString, formatString) {
   const indexArray = formatString.split("").reduce((arr, char, index) => {
     if (index === 0 || char !== formatString[index - 1]) {
       return [...arr, index];
     }
+
     return arr;
   }, []);
   const formatArray = makeSeparatedValues(indexArray, formatString);
   const valueArray = makeSeparatedValues(indexArray, valueString);
+
   if (checkForCompleteMatch(formatArray, valueArray)) {
     return [formatArray.join(" "), valueArray.join(" ")];
   }
+
   return null;
 }
+
 function findMatchWithSeparators(valueString, formatString, separator) {
   const formatArray = formatString.split(separator);
   const valueArray = valueString.split(separator);
+
   if (checkForCompleteMatch(formatArray, valueArray)) {
     return [formatString, valueString];
   }
+
   return null;
 }
+
 export const getSeparator = value => {
   const separator = ["", ".", ",", "-", "/", " ", ":"].slice(1).find(char => value.includes(char));
   return separator || "";
@@ -83,24 +101,30 @@ export function findMatchedFormatAndValue(valueString, formats) {
   if (!valueString) {
     return ["", ""];
   }
+
   const valueSeparator = getSeparator(valueString);
   const filteredFormats = formats.filter(formatString => formatString.length === valueString.length && getSeparator(formatString) === valueSeparator);
   const matchedFormatAndValue = filteredFormats.reduce((acc, formatString) => {
     const formatSeparator = getSeparator(formatString);
+
     if (valueSeparator === "" && formatSeparator === "") {
       // This check is added as there is a bug in date-fns https://github.com/date-fns/date-fns/issues/2785
       // it incorrectly matches or fails to parse valid dates with no separators
       const match = findMatchWithNoSeparators(valueString, formatString);
+
       if (match) {
         return match;
       }
     }
+
     if (valueSeparator && formatSeparator && valueSeparator === formatSeparator) {
       const match = findMatchWithSeparators(valueString, formatString, valueSeparator);
+
       if (match) {
         return match;
       }
     }
+
     return acc;
   }, []);
   return matchedFormatAndValue;
@@ -108,34 +132,40 @@ export function findMatchedFormatAndValue(valueString, formats) {
 export function parseISODate(value) {
   return parseISO(value);
 }
-
 /**
  * Returns the disabled array of days specified by props maxDate and minDate
  */
+
 export function getDisabledDays(minDate, maxDate) {
   const days = [];
+
   if (!minDate && !maxDate) {
     return null;
   }
+
   if (checkISOFormatAndLength(minDate)) {
     days.push({
       before: parseISODate(minDate)
     });
   }
+
   if (checkISOFormatAndLength(maxDate)) {
     days.push({
       after: parseISODate(maxDate)
     });
   }
+
   return days;
 }
 export function checkISOFormatAndLength(value) {
   if (!value || value.length !== 10 || !isValidISODate(value)) {
     return false;
   }
+
   const array = value.split("-");
   return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
 }
+
 function isValidISODate(dateString) {
   return parseISODate(dateString).toString() !== "Invalid Date";
 }

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

@@ -1,8 +1,10 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledWeekday from "./weekday.style";
 import StyledAbbr from "./abbr.style";
+
 const Weekday = ({
   className,
   title,
@@ -14,6 +16,7 @@ const Weekday = ({
 }, props), /*#__PURE__*/React.createElement(StyledAbbr, {
   title: title
 }, children));
+
 Weekday.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,

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

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -13,6 +14,7 @@ import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const DateInput = ({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
@@ -60,7 +62,9 @@ const DateInput = ({
   const [open, setOpen] = useState(false);
   const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
   const isInitialValue = useRef(true);
+
   const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
+
   const buildCustomEvent = ev => {
     const {
       id,
@@ -69,8 +73,7 @@ const DateInput = ({
     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(...additionalYears(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
-    ev.target = {
-      ...(name && {
+    ev.target = { ...(name && {
         name
       }),
       ...(id && {
@@ -83,6 +86,7 @@ const DateInput = ({
     };
     return ev;
   };
+
   const handleClickAway = () => {
     if (open) {
       alreadyFocused.current = true;
@@ -93,37 +97,44 @@ const DateInput = ({
       alreadyFocused.current = false;
     }
   };
+
   const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
+
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
   };
+
   const focusInput = () => {
     var _inputRef$current;
+
     focusedViaPicker.current = true;
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   };
+
   const handleDayClick = (day, ev) => {
     setSelectedDays(day);
-    onChange(buildCustomEvent({
-      ...ev,
-      target: {
-        ...ev.target,
+    onChange(buildCustomEvent({ ...ev,
+      target: { ...ev.target,
         value: formattedValue(format, day)
       }
     }));
     focusInput();
     setOpen(false);
   };
+
   const handleBlur = ev => {
     if (disabled || readOnly) {
       return;
     }
+
     let event;
+
     if (isDateValid(selectedDays)) {
       event = buildCustomEvent(ev);
       const currentValue = checkISOFormatAndLength(value) ? formattedValue(format, parseISODate(value)) : value;
       const [, matchedValue] = findMatchedFormatAndValue(currentValue, formats);
+
       if (formattedValue(format, selectedDays) !== matchedValue) {
         onChange(event);
       }
@@ -132,8 +143,7 @@ const DateInput = ({
         id,
         name
       } = ev.target;
-      ev.target = {
-        ...(name && {
+      ev.target = { ...(name && {
           name
         }),
         ...(id && {
@@ -146,52 +156,66 @@ const DateInput = ({
       };
       event = ev;
     }
+
     if (isBlurBlocked.current) {
       return;
     }
+
     if (onBlur) {
       onBlur(event);
     }
   };
+
   const handleFocus = ev => {
     if (disabled || readOnly) {
       return;
     }
+
     isBlurBlocked.current = false;
+
     if (!open && !alreadyFocused.current) {
       setOpen(true);
     } else {
       alreadyFocused.current = false;
     }
+
     if (onFocus) {
       onFocus(ev);
     }
   };
+
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
     }
+
     if (Events.isTabKey(ev)) {
       setOpen(false);
       alreadyFocused.current = false;
     }
   };
+
   const handleClick = ev => {
     if (disabled || readOnly) {
       return;
     }
+
     if (onClick) {
       onClick(ev);
     }
   };
+
   const handleMouseDown = ev => {
     handleClickInside(ev);
+
     if (disabled || readOnly) {
       return;
     }
+
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
+
     if (ev.target.type === "text" && !open) {
       setOpen(true);
     } else if (ev.target.type !== "text") {
@@ -199,18 +223,23 @@ const DateInput = ({
       setOpen(prev => !prev);
     }
   };
+
   const handleIconMouseDown = e => {
     isBlurBlocked.current = true;
     handleMouseDown(e);
   };
+
   const handlePickerMouseDown = ev => {
     isBlurBlocked.current = true;
     handleClickInside(ev);
   };
+
   const assignInput = input => {
     var _inputRefMap$inputNam;
+
     inputRef.current = input.current;
     parentRef.current = input.current.parentElement;
+
     if (inputRefMap && ((_inputRefMap$inputNam = inputRefMap[inputName]) === null || _inputRefMap$inputNam === void 0 ? void 0 : _inputRefMap$inputNam.setOpen) !== setOpen) {
       setInputRefMap({
         [inputName]: {
@@ -220,8 +249,10 @@ const DateInput = ({
       });
     }
   };
+
   useEffect(() => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
+
     if (matchedFormat && matchedValue && isDateValid(parseDate(matchedFormat, matchedValue))) {
       setSelectedDays(parseDate(...additionalYears(matchedFormat, matchedValue)));
     } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
@@ -230,20 +261,26 @@ const DateInput = ({
       setSelectedDays(undefined);
     }
   }, [value, formats]);
+
   const computedValue = () => {
     if (checkISOFormatAndLength(value) && isInitialValue.current) {
       return formattedValue(format, parseISODate(value));
     }
+
     const valueSeparator = getSeparator(value);
     const formatSeparator = getSeparator(format);
+
     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)));
     }
+
     return value;
   };
+
   return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -285,23 +322,30 @@ const DateInput = ({
     open: open
   }));
 };
-DateInput.propTypes = {
-  ...Textbox.propTypes,
+
+DateInput.propTypes = { ...Textbox.propTypes,
   ...marginPropTypes,
+
   /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: PropTypes.object,
+
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: PropTypes.bool,
+
   /** Minimum possible date YYYY-MM-DD */
   minDate: PropTypes.string,
+
   /** Maximum possible date YYYY-MM-DD */
   maxDate: PropTypes.string,
+
   /** Specify a callback triggered on change */
   onChange: PropTypes.func.isRequired,
+
   /** The current date string */
   value: PropTypes.string.isRequired,
+
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: PropTypes.bool
 };