@salutejs/plasma-new-hope 0.322.0-canary.1939.14642328722.0 → 0.322.0-canary.1941.14638918350.0

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -10,12 +10,11 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, getPlacements, noop } from "../../../utils";
-import { getDateFormatDelimiter } from "../utils/dateHelper";
+import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
 import { InputHidden, StyledCalendar } from "../DatePickerBase.styles";
 import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
-import { getFormattedDates } from "../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
@@ -93,44 +92,32 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onChange = _ref.onChange,
       autoComplete = _ref.autoComplete,
       rest = _objectWithoutProperties(_ref, _excluded);
-    if (value && defaultDate) {
-      console.error("Controlled DatePicker can't have `defaultDate`, use `value` instead");
-    }
     var inputRef = useRef(null);
     var innerRef = useRef(null);
     var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
+    var _useState3 = useState(formatCalendarValue(value || defaultDate, format, lang)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      calendarValue = _useState4[0],
+      setCalendarValue = _useState4[1];
+    var _useState5 = useState(formatInputValue({
+        value: value || defaultDate,
+        format: format,
+        lang: lang
+      })),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
     var dateFormatDelimiter = useCallback(function () {
       return getDateFormatDelimiter(format);
     }, [format]);
-    var initialValues = getFormattedDates({
-      value: value || defaultDate,
-      delimiter: dateFormatDelimiter(),
-      lang: lang,
-      format: format,
-      includeEdgeDates: includeEdgeDates,
-      min: min,
-      max: max
-    });
-    var _useState3 = useState({
-        calendar: initialValues.originalDate,
-        input: initialValues.formattedDate
-      }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      correctDates = _useState4[0],
-      setCorrectDates = _useState4[1];
-    var _useState5 = useState(correctDates.calendar),
-      _useState6 = _slicedToArray(_useState5, 2),
-      calendarValue = _useState6[0],
-      setCalendarValue = _useState6[1];
-    var _useState7 = useState(correctDates.input),
-      _useState8 = _slicedToArray(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
     var _useDatePicker = useDatePicker({
         currentValue: inputValue,
+        setInputValue: setInputValue,
+        setCalendarValue: setCalendarValue,
+        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
@@ -139,14 +126,6 @@ export var datePickerRoot = function datePickerRoot(Root) {
         valueError: valueError,
         valueSuccess: valueSuccess,
         name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        setCorrectDates: setCorrectDates,
-        setInputValue: setInputValue,
-        setCalendarValue: setCalendarValue,
-        dateFormatDelimiter: dateFormatDelimiter,
         onChangeValue: onChangeValue,
         onCommitDate: onCommitDate,
         onChange: onChange
@@ -154,18 +133,16 @@ export var datePickerRoot = function datePickerRoot(Root) {
       datePickerErrorClass = _useDatePicker.datePickerErrorClass,
       datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
       handleChangeValue = _useDatePicker.handleChangeValue,
-      handleCalendarPick = _useDatePicker.handleCalendarPick,
-      handleSearch = _useDatePicker.handleSearch,
+      handleCommitDate = _useDatePicker.handleCommitDate,
       updateExternalDate = _useDatePicker.updateExternalDate;
-    var handleToggle = function handleToggle(innerOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== keys.Escape ? true : innerOpened;
-      if (!innerOpened && !calendarValue) {
-        setCalendarValue(function (prevValue) {
-          return prevValue === undefined ? null : undefined;
-        });
+      var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && event.code !== keys.Escape ? true : opened;
+      if (!isCalendarOpen && inputValue) {
+        var _inputRef$current;
+        inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
       }
       if (onToggle) {
         onToggle(isCalendarOpen, event);
@@ -175,22 +152,10 @@ export var datePickerRoot = function datePickerRoot(Root) {
     };
     var _useKeyNavigation = useKeyNavigation({
         isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
-        closeOnEsc: closeOnEsc,
-        onToggle: handleToggle
+        onToggle: handleToggle,
+        closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleBlur = function handleBlur(event) {
-      if (!calendarValue && correctDates.calendar) {
-        setCalendarValue(new Date(correctDates.calendar));
-        setInputValue(correctDates.input);
-      }
-      if (onBlur) {
-        onBlur(event);
-      }
-    };
     var DatePickerInput = /*#__PURE__*/React.createElement(StyledInput, {
       ref: inputRef,
       className: cx(datePickerErrorClass, datePickerSuccessClass),
@@ -204,9 +169,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       textBefore: textBefore,
       textAfter: textAfter,
       onChange: handleChangeValue,
-      onSearch: handleSearch,
+      onSearch: function onSearch(date) {
+        return handleCommitDate(date, true, false);
+      },
       onFocus: onFocus,
-      onBlur: handleBlur,
+      onBlur: onBlur,
       onKeyDown: onKeyDown,
       required: required,
       requiredPlacement: requiredPlacement,
@@ -222,13 +189,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     useLayoutEffect(function () {
-      updateExternalDate(value);
-    }, [value, format, lang]);
-    useLayoutEffect(function () {
-      if (!value) {
-        updateExternalDate(defaultDate);
-      }
-    }, [defaultDate, format, lang]);
+      var externalDate = value || defaultDate;
+      updateExternalDate(externalDate, setInputValue, setCalendarValue);
+    }, [value, defaultDate, format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,
@@ -272,7 +235,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       includeEdgeDates: includeEdgeDates,
       isRange: false,
       locale: lang,
-      onChangeValue: handleCalendarPick
+      onChangeValue: function onChangeValue(date, dateInfo) {
+        return handleCommitDate(date, false, true, dateInfo);
+      }
     }))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       className: cx(datePickerErrorClass, datePickerSuccessClass)
     }, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({

package/styled-components/es/components/DatePicker/hooks/useDatePicker.js

@@ -1,203 +1,147 @@
-import { customDayjs } from "../../../utils/datejs";
-import { QUARTER_NAMES } from "../../Calendar/utils";
 import { classes } from "../DatePicker.tokens";
-import { getFormattedDates, getMaskedDateOnInput } from "../utils";
+import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput, validateDateWithFullMonth } from "../utils/dateHelper";
 export var useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
+    setInputValue = _ref.setInputValue,
+    setCalendarValue = _ref.setCalendarValue,
+    dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
     _ref$lang = _ref.lang,
     lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
+    maskWithFormat = _ref.maskWithFormat,
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
     name = _ref.name,
-    type = _ref.type,
-    min = _ref.min,
-    max = _ref.max,
-    includeEdgeDates = _ref.includeEdgeDates,
-    maskWithFormat = _ref.maskWithFormat,
-    setCorrectDates = _ref.setCorrectDates,
-    setInputValue = _ref.setInputValue,
-    setCalendarValue = _ref.setCalendarValue,
-    dateFormatDelimiter = _ref.dateFormatDelimiter,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? classes.datePickerSuccess : undefined;
-  var getQuarterInfo = function getQuarterInfo(originalDate) {
-    if (type !== 'Quarters') {
-      return;
-    }
-    var endQuarter = new Date(originalDate);
-    endQuarter.setMonth(originalDate.getMonth() + 3);
-    endQuarter.setDate(0);
-    customDayjs.locale(lang);
-    var quarterIndex = customDayjs(originalDate).quarter() - 1;
-    return {
-      name: QUARTER_NAMES[quarterIndex],
-      fullValue: [originalDate, endQuarter]
-    };
-  };
   var handleChangeValue = function handleChangeValue(event) {
     if (disabled || readOnly) {
       return;
     }
     var value = event.target.value;
     var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
-    var _getFormattedDates = getFormattedDates({
+    if (!format) {
+      setCalendarValue(formatCalendarValue(newValue));
+      setInputValue(formatInputValue({
         value: newValue,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
         format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates.formattedDate,
-      isoDate = _getFormattedDates.isoDate,
-      originalDate = _getFormattedDates.originalDate;
-    if (originalDate) {
-      setCorrectDates({
-        calendar: originalDate,
-        input: formattedDate
-      });
-      var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
-      setCalendarValue(originalDate);
-      setInputValue(formattedDate);
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
+        lang: lang
+      }));
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: formattedDate,
-          originalDate: originalDate,
-          isoDate: isoDate,
+          value: newValue,
           name: name
         }
       });
       return;
     }
-    if (formattedDate === '') {
-      setCorrectDates({
-        calendar: undefined,
-        input: ''
-      });
+    var _validateDateWithFull = validateDateWithFullMonth({
+        currentValue: newValue,
+        format: format,
+        lang: lang
+      }),
+      hasMonthFullName = _validateDateWithFull.hasMonthFullName,
+      isValidMonth = _validateDateWithFull.isValidMonth,
+      isLengthEqual = _validateDateWithFull.isLengthEqual;
+    if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
+      setCalendarValue(formatCalendarValue(newValue, format, lang));
     }
-    setCalendarValue(originalDate);
-    setInputValue(formattedDate);
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
+    setInputValue(formatInputValue({
+      value: newValue,
+      format: format,
+      lang: lang,
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: isValidMonth,
+      isLengthEqual: isLengthEqual
+    }));
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedDate,
-        originalDate: originalDate,
-        isoDate: isoDate,
+        value: newValue,
         name: name
       }
     });
   };
-  var handleSearch = function handleSearch(date) {
+  var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
     if (disabled || readOnly) {
       return;
     }
     if (!date) {
       setCalendarValue(undefined);
       setInputValue('');
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true, undefined, undefined, '');
+      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
-    var _getFormattedDates2 = getFormattedDates({
+    if (isCalendarValue) {
+      var _formattedInputValue = formatInputValue({
         value: date,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
         format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates2.formattedDate,
-      isoDate = _getFormattedDates2.isoDate,
-      originalDate = _getFormattedDates2.originalDate;
-    if (originalDate) {
-      var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
-    }
-  };
-  var handleCalendarPick = function handleCalendarPick(date, dateInfo) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (!date) {
-      setInputValue('');
-      setCalendarValue(date);
-      setCorrectDates({
-        calendar: date || undefined,
-        input: ''
+        lang: lang
       });
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, '', date, '');
+      setCalendarValue(formatCalendarValue(date, format, lang));
+      setInputValue(_formattedInputValue);
+      onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, _formattedInputValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: '',
-          originalDate: date,
-          isoDate: '',
+          value: _formattedInputValue,
           name: name
         }
       });
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate('', false, true, dateInfo, date || undefined, '');
       return;
     }
-    customDayjs.locale(lang);
-    var formattedDate = customDayjs(date).format(format);
-    var isoDate = date.toISOString();
-    setCalendarValue(date);
-    setInputValue(formattedDate);
-    setCorrectDates({
-      calendar: date,
-      input: formattedDate
+    var formatString = applyFormat ? format : undefined;
+    var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
+      newDate = _getDateFromFormat.value,
+      isError = _getDateFromFormat.isError,
+      isSuccess = _getDateFromFormat.isSuccess;
+    var formattedInputValue = formatInputValue({
+      value: newDate,
+      format: format,
+      lang: lang
     });
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedDate, date, isoDate);
+    setCalendarValue(formatCalendarValue(newDate, format, lang));
+    setInputValue(formattedInputValue);
+    onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedInputValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedDate,
-        originalDate: date,
-        isoDate: isoDate,
+        value: formattedInputValue,
         name: name
       }
     });
-    onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, date, isoDate);
   };
-  var updateExternalDate = function updateExternalDate(externalDate) {
-    var _getFormattedDates3 = getFormattedDates({
-        value: externalDate || null,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
-        format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates3.formattedDate,
-      originalDate = _getFormattedDates3.originalDate;
-    setInputValue(formattedDate);
-    setCalendarValue(originalDate);
-    if (originalDate) {
-      setCorrectDates({
-        calendar: originalDate,
-        input: formattedDate
-      });
+  var updateExternalDate = function updateExternalDate(externalDate, inputSetter, calendarSetter) {
+    inputSetter(formatInputValue({
+      value: externalDate,
+      format: format,
+      lang: lang
+    }));
+    if (!format) {
+      calendarSetter(formatCalendarValue(externalDate, undefined, lang));
+      return;
     }
-    if (formattedDate === '') {
-      setCorrectDates({
-        calendar: undefined,
-        input: ''
-      });
+    if (!externalDate) {
+      calendarSetter(undefined);
+      return;
+    }
+    var _getDateFromFormat2 = getDateFromFormat(externalDate, undefined, lang),
+      newDate = _getDateFromFormat2.value,
+      isError = _getDateFromFormat2.isError;
+    if (!isError) {
+      calendarSetter(formatCalendarValue(newDate, format, lang));
     }
   };
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
     handleChangeValue: handleChangeValue,
-    handleSearch: handleSearch,
-    handleCalendarPick: handleCalendarPick,
+    handleCommitDate: handleCommitDate,
     updateExternalDate: updateExternalDate
   };
 };

package/styled-components/es/components/DatePicker/hooks/useKeyboardNavigation.js

@@ -1,4 +1,3 @@
-import { needFullMonth } from "../utils/dateHelper";
 export var keys = {
   Space: 'Space',
   Escape: 'Escape'
@@ -6,15 +5,8 @@ export var keys = {
 export var useKeyNavigation = function useKeyNavigation(_ref) {
   var isCalendarOpen = _ref.isCalendarOpen,
     closeOnEsc = _ref.closeOnEsc,
-    format = _ref.format,
-    maskWithFormat = _ref.maskWithFormat,
-    delimiter = _ref.delimiter,
     onToggle = _ref.onToggle;
   var onKeyDown = function onKeyDown(event) {
-    if (event.key === delimiter && maskWithFormat && format && !needFullMonth(format)) {
-      event.preventDefault();
-      return;
-    }
     switch (event.code) {
       case keys.Space:
         {

package/styled-components/es/components/DatePicker/utils/dateHelper.js

@@ -1,5 +1,57 @@
-export var needFullMonth = function needFullMonth(format) {
-  return /M{3,4}/g.test(format);
+import { customDayjs } from "../../../utils/datejs";
+export var formatInputValue = function formatInputValue(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    lang = _ref.lang,
+    hasMonthFullName = _ref.hasMonthFullName,
+    isValidMonth = _ref.isValidMonth,
+    isLengthEqual = _ref.isLengthEqual;
+  if (!value || !lang) {
+    return '';
+  }
+  if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
+    return String(value);
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format).locale(lang).format(format);
+  }
+  if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).locale(lang).format(format);
+  }
+  return String(value);
+};
+export var formatCalendarValue = function formatCalendarValue(value, format, lang) {
+  if (!value || !lang) {
+    return undefined;
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format, true).locale(lang).toDate();
+  }
+  if (String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).locale(lang).toDate();
+  }
+  return undefined;
+};
+export var getDateFromFormat = function getDateFromFormat(value, format, lang) {
+  if (format && customDayjs(value, format, true).isValid() && lang) {
+    return {
+      value: customDayjs(value, format, true).locale(lang).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
+    return {
+      value: customDayjs(value).locale(lang).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  return {
+    value: value,
+    isError: true,
+    isSuccess: false
+  };
 };
 export var getDateFormatDelimiter = function getDateFormatDelimiter(format) {
   var _format$match;
@@ -8,4 +60,52 @@ export var getDateFormatDelimiter = function getDateFormatDelimiter(format) {
   }
   var delimiter = (_format$match = format.match(/[^a-zA-Z0-9]/)) === null || _format$match === void 0 ? void 0 : _format$match[0];
   return delimiter !== null && delimiter !== void 0 ? delimiter : '';
+};
+export var getMaskedDateOnInput = function getMaskedDateOnInput(value, format, delimiter, prevValue) {
+  if (!value) {
+    return '';
+  }
+  if (!format || !delimiter || /M{3,4}/g.test(format)) {
+    return value;
+  }
+  if (value.length >= format.length) {
+    return value.slice(0, format.length);
+  }
+  if (prevValue && value.length < prevValue.length && (prevValue === null || prevValue === void 0 ? void 0 : prevValue[value.length]) === delimiter) {
+    return value.slice(0, -1);
+  }
+  if ((format === null || format === void 0 ? void 0 : format[value.length]) === delimiter) {
+    return value + delimiter;
+  }
+  return value;
+};
+export var validateDateWithFullMonth = function validateDateWithFullMonth(_ref2) {
+  var currentValue = _ref2.currentValue,
+    format = _ref2.format,
+    lang = _ref2.lang;
+  /**
+   * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+   * нужно дополнительно проводить валидацию на полноту введенной даты.
+   * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+   */
+  var hasMonthFullName = /M{3,4}/g.test(format);
+  if (!hasMonthFullName) {
+    return {
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: false,
+      isLengthEqual: false
+    };
+  }
+  customDayjs.locale(lang);
+  var firstIndexOfMonth = format.indexOf('M');
+  var lastIndexOfMonth = currentValue.indexOf(getDateFormatDelimiter(format), firstIndexOfMonth);
+  var fullMonthName = !lastIndexOfMonth ? currentValue.slice(firstIndexOfMonth) : currentValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+  var monthFormatting = format.replace(/[^M]/g, '');
+  var isValidMonth = customDayjs("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+  var isLengthEqual = format.length - monthFormatting.length === currentValue.length - fullMonthName.length;
+  return {
+    hasMonthFullName: hasMonthFullName,
+    isValidMonth: isValidMonth,
+    isLengthEqual: isLengthEqual
+  };
 };

package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentPrimaryDisabledColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.calendarContentSecondaryDisabledColor, tokens.calendarDisabledOpacity, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--surface-solid-default);", ":", ";", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.leftHelperColorError, tokens.leftHelperColorSuccess, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.indicatorColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.textFieldPlaceholderColorFocus, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentPrimaryDisabledColor, tokens.calendarHeaderArrowColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.calendarContentSecondaryDisabledColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
     },
     size: {
       l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0.75rem;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.063rem;", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarCurrentItemBorderWidth, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),