carbon-react 111.12.3 → 111.12.5

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

@@ -13,24 +13,32 @@ exports.parseISODate = parseISODate;
 exports.getDisabledDays = getDisabledDays;
 exports.checkISOFormatAndLength = checkISOFormatAndLength;
 exports.getSeparator = void 0;
+
 var _fp = require("date-fns/fp");
+
 function parseDate(formatString, valueString) {
   if (!valueString || !formatString) return null;
   return (0, _fp.parse)(new Date(), formatString, valueString);
 }
+
 function formatToISO(formatString, valueString) {
   const dateValue = parseDate(formatString, valueString);
+
   if (!isDateValid(dateValue)) {
     return null;
   }
+
   return (0, _fp.formatISO)(dateValue).split("T")[0];
 }
+
 function formattedValue(formatString, value) {
   return (0, _fp.format)(formatString, value);
 }
+
 function isDateValid(date) {
   return date && date.toString() !== "Invalid Date";
 }
+
 function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   if (formatString.includes("d")) {
     return formatString.length === valueString.length && (0, _fp.isMatch)(fullFormat.join("."), fullValue.join(".")) // need to check day value with month value
@@ -39,11 +47,14 @@ 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];
   }
+
   const formatStartWithYear = formatString.startsWith("yy");
   const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
   const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
@@ -52,106 +63,136 @@ 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;
 }
+
 const getSeparator = value => {
   const separator = ["", ".", ",", "-", "/", " ", ":"].slice(1).find(char => value.includes(char));
   return separator || "";
 };
+
 exports.getSeparator = getSeparator;
+
 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;
 }
+
 function parseISODate(value) {
   return (0, _fp.parseISO)(value);
 }
-
 /**
  * Returns the disabled array of days specified by props maxDate and minDate
  */
+
+
 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;
 }
+
 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/lib/components/date/__internal__/weekday/abbr.style.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledAbbr = _styledComponents.default.abbr`
   text-decoration: none;
 `;

package/lib/components/date/__internal__/weekday/index.js

@@ -9,5 +9,7 @@ Object.defineProperty(exports, "default", {
     return _weekday.default;
   }
 });
+
 var _weekday = _interopRequireDefault(require("./weekday.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _weekday = _interopRequireDefault(require("./weekday.style"));
+
 var _abbr = _interopRequireDefault(require("./abbr.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
+
 const Weekday = ({
   className,
   title,
@@ -21,6 +28,7 @@ const Weekday = ({
 }, props), /*#__PURE__*/_react.default.createElement(_abbr.default, {
   title: title
 }, children));
+
 Weekday.propTypes = {
   className: _propTypes.default.string,
   title: _propTypes.default.string,

package/lib/components/date/__internal__/weekday/weekday.style.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledWeekday = _styledComponents.default.div`
   &,
   &.DayPicker-Weekday {

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

@@ -4,24 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
 var _utils = require("./__internal__/utils");
+
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+
 var _utils2 = require("../../style/utils");
+
 var _dateFormats = _interopRequireDefault(require("./__internal__/date-formats"));
+
 var _date = _interopRequireDefault(require("./date.style"));
+
 var _textbox = _interopRequireDefault(require("../textbox"));
+
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
+
 var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
+
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
+
 const marginPropTypes = (0, _utils2.filterStyledSystemMarginProps)(_propTypes2.default.space);
+
 const DateInput = ({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
@@ -69,7 +88,9 @@ const DateInput = ({
   const [open, setOpen] = (0, _react.useState)(false);
   const [selectedDays, setSelectedDays] = (0, _react.useState)((0, _utils.checkISOFormatAndLength)(value) ? (0, _utils.parseISODate)(value) : (0, _utils.parseDate)(format, value));
   const isInitialValue = (0, _react.useRef)(true);
+
   const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
+
   const buildCustomEvent = ev => {
     const {
       id,
@@ -78,8 +99,7 @@ const DateInput = ({
     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)(...(0, _utils.additionalYears)(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
-    ev.target = {
-      ...(name && {
+    ev.target = { ...(name && {
         name
       }),
       ...(id && {
@@ -92,6 +112,7 @@ const DateInput = ({
     };
     return ev;
   };
+
   const handleClickAway = () => {
     if (open) {
       alreadyFocused.current = true;
@@ -102,37 +123,44 @@ const DateInput = ({
       alreadyFocused.current = false;
     }
   };
+
   const handleClickInside = (0, _useClickAwayListener.default)(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: (0, _utils.formattedValue)(format, day)
       }
     }));
     focusInput();
     setOpen(false);
   };
+
   const handleBlur = ev => {
     if (disabled || readOnly) {
       return;
     }
+
     let event;
+
     if ((0, _utils.isDateValid)(selectedDays)) {
       event = buildCustomEvent(ev);
       const currentValue = (0, _utils.checkISOFormatAndLength)(value) ? (0, _utils.formattedValue)(format, (0, _utils.parseISODate)(value)) : value;
       const [, matchedValue] = (0, _utils.findMatchedFormatAndValue)(currentValue, formats);
+
       if ((0, _utils.formattedValue)(format, selectedDays) !== matchedValue) {
         onChange(event);
       }
@@ -141,8 +169,7 @@ const DateInput = ({
         id,
         name
       } = ev.target;
-      ev.target = {
-        ...(name && {
+      ev.target = { ...(name && {
           name
         }),
         ...(id && {
@@ -155,52 +182,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.default.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") {
@@ -208,18 +249,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]: {
@@ -229,8 +275,10 @@ const DateInput = ({
       });
     }
   };
+
   (0, _react.useEffect)(() => {
     const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(value, formats);
+
     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) && isInitialValue.current) {
@@ -239,20 +287,26 @@ const DateInput = ({
       setSelectedDays(undefined);
     }
   }, [value, formats]);
+
   const computedValue = () => {
     if ((0, _utils.checkISOFormatAndLength)(value) && isInitialValue.current) {
       return (0, _utils.formattedValue)(format, (0, _utils.parseISODate)(value));
     }
+
     const valueSeparator = (0, _utils.getSeparator)(value);
     const formatSeparator = (0, _utils.getSeparator)(format);
+
     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)));
     }
+
     return value;
   };
+
   return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -294,23 +348,30 @@ const DateInput = ({
     open: open
   }));
 };
-DateInput.propTypes = {
-  ..._textbox.default.propTypes,
+
+DateInput.propTypes = { ..._textbox.default.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.default.object,
+
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: _propTypes.default.bool,
+
   /** Minimum possible date YYYY-MM-DD */
   minDate: _propTypes.default.string,
+
   /** Maximum possible date YYYY-MM-DD */
   maxDate: _propTypes.default.string,
+
   /** Specify a callback triggered on change */
   onChange: _propTypes.default.func.isRequired,
+
   /** The current date string */
   value: _propTypes.default.string.isRequired,
+
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: _propTypes.default.bool
 };

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

@@ -4,13 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledSystem = require("styled-system");
+
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
+
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const datePickerWidth = {
   large: "140px",
   medium: "135px",

package/lib/components/date/index.js

@@ -9,5 +9,7 @@ Object.defineProperty(exports, "default", {
     return _date.default;
   }
 });
+
 var _date = _interopRequireDefault(require("./date.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }