@salutejs/plasma-new-hope 0.135.0-canary.1361.10634067686.0 → 0.135.0-canary.1404.10630068652.0

package/cjs/components/DatePicker/utils/dateHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateHelper.js","sources":["../../../../src/components/DatePicker/utils/dateHelper.ts"],"sourcesContent":["import { customDayjs } from '../../../utils/datejs';\n\nexport const formatInputValue = (value?: Date | string, format?: string) => {\n    if (!value) {\n        return '';\n    }\n\n    if (format && customDayjs(value, format, true).isValid()) {\n        return customDayjs(value, format).format(format);\n    }\n\n    if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {\n        return customDayjs(value).format(format);\n    }\n\n    return String(value);\n};\n\nexport const formatCalendarValue = (value?: Date | string, format?: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    if (format && customDayjs(value, format, true).isValid()) {\n        return customDayjs(value, format, true).toDate();\n    }\n\n    if (String(new Date(value)) !== 'Invalid Date') {\n        return customDayjs(value).toDate();\n    }\n\n    return undefined;\n};\n\nexport const getDateFromFormat = (value: Date | string, format?: string) => {\n    if (format && customDayjs(value, format, true).isValid()) {\n        return { value: customDayjs(value, format, true).toDate(), isError: false, isSuccess: true };\n    }\n\n    if (!format && String(new Date(value)) !== 'Invalid Date') {\n        return { value: customDayjs(value).toDate(), isError: false, isSuccess: true };\n    }\n\n    return { value, isError: true, isSuccess: false };\n};\n\nexport const getDateFormatDelimiter = (format?: string) => {\n    if (!format) {\n        return '';\n    }\n\n    const delimiter = format.match(/[^a-zA-Z0-9]/)?.[0];\n\n    return delimiter ?? '';\n};\n\nexport const getMaskedDateOnInput = (value?: string, format?: string, delimiter?: string, prevValue?: string) => {\n    if (!value) {\n        return '';\n    }\n\n    if (!format || !delimiter) {\n        return value;\n    }\n\n    if (value.length >= format.length) {\n        return value.slice(0, format.length);\n    }\n\n    if (prevValue && value.length < prevValue.length && prevValue?.[value.length] === delimiter) {\n        return value.slice(0, -1);\n    }\n\n    if (format?.[value.length] === delimiter) {\n        return value + delimiter;\n    }\n\n    return value;\n};\n"],"names":["formatInputValue","value","format","customDayjs","isValid","String","length","Date","formatCalendarValue","undefined","toDate","getDateFromFormat","isError","isSuccess","getDateFormatDelimiter","_format$match","delimiter","match","getMaskedDateOnInput","prevValue","slice"],"mappings":"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"}
+{"version":3,"file":"dateHelper.js","sources":["../../../../src/components/DatePicker/utils/dateHelper.ts"],"sourcesContent":["import { customDayjs } from '../../../utils/datejs';\n\nexport type Langs = 'ru' | 'en';\n\nexport const formatInputValue = (value?: Date | string, format?: string, lang?: Langs) => {\n    if (!value || !lang) {\n        return '';\n    }\n\n    if (format && customDayjs(value, format, true).isValid()) {\n        return customDayjs(value, format).locale(lang).format(format);\n    }\n\n    if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {\n        return customDayjs(value).locale(lang).format(format);\n    }\n\n    return String(value);\n};\n\nexport const formatCalendarValue = (value?: Date | string, format?: string, lang?: Langs) => {\n    if (!value || !lang) {\n        return undefined;\n    }\n\n    if (format && customDayjs(value, format, true).isValid()) {\n        return customDayjs(value, format, true).locale(lang).toDate();\n    }\n\n    if (String(new Date(value)) !== 'Invalid Date') {\n        return customDayjs(value).locale(lang).toDate();\n    }\n\n    return undefined;\n};\n\nexport const getDateFromFormat = (value: Date | string, format?: string, lang?: Langs) => {\n    if (format && customDayjs(value, format, true).isValid() && lang) {\n        return { value: customDayjs(value, format, true).locale(lang).toDate(), isError: false, isSuccess: true };\n    }\n\n    if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {\n        return { value: customDayjs(value).locale(lang).toDate(), isError: false, isSuccess: true };\n    }\n\n    return { value, isError: true, isSuccess: false };\n};\n\nexport const getDateFormatDelimiter = (format?: string) => {\n    if (!format) {\n        return '';\n    }\n\n    const delimiter = format.match(/[^a-zA-Z0-9]/)?.[0];\n\n    return delimiter ?? '';\n};\n\nexport const getMaskedDateOnInput = (value?: string, format?: string, delimiter?: string, prevValue?: string) => {\n    if (!value) {\n        return '';\n    }\n\n    if (!format || !delimiter) {\n        return value;\n    }\n\n    if (value.length >= format.length) {\n        return value.slice(0, format.length);\n    }\n\n    if (prevValue && value.length < prevValue.length && prevValue?.[value.length] === delimiter) {\n        return value.slice(0, -1);\n    }\n\n    if (format?.[value.length] === delimiter) {\n        return value + delimiter;\n    }\n\n    return value;\n};\n"],"names":["formatInputValue","value","format","lang","customDayjs","isValid","locale","String","length","Date","formatCalendarValue","undefined","toDate","getDateFromFormat","isError","isSuccess","getDateFormatDelimiter","_format$match","delimiter","match","getMaskedDateOnInput","prevValue","slice"],"mappings":"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"}

package/cjs/utils/datejs.js

@@ -6,6 +6,8 @@ var dayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
 var quarterOfYear = require('dayjs/plugin/quarterOfYear');
 var advancedFormat = require('dayjs/plugin/advancedFormat');
+require('dayjs/locale/ru');
+require('dayjs/locale/en');
 
 dayjs.extend(customParseFormat);
 dayjs.extend(quarterOfYear);

package/cjs/utils/datejs.js.map

@@ -1 +1 @@
-{"version":3,"file":"datejs.js","sources":["../../src/utils/datejs.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport quarterOfYear from 'dayjs/plugin/quarterOfYear';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(customParseFormat);\ndayjs.extend(quarterOfYear);\ndayjs.extend(advancedFormat);\n\nexport const customDayjs = dayjs;\n"],"names":["dayjs","extend","customParseFormat","quarterOfYear","advancedFormat","customDayjs"],"mappings":";;;;;;;;;AAKAA,KAAK,CAACC,MAAM,CAACC,iBAAiB,CAAC,CAAA;AAC/BF,KAAK,CAACC,MAAM,CAACE,aAAa,CAAC,CAAA;AAC3BH,KAAK,CAACC,MAAM,CAACG,cAAc,CAAC,CAAA;AAErB,IAAMC,WAAW,GAAGL;;;;"}
+{"version":3,"file":"datejs.js","sources":["../../src/utils/datejs.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport quarterOfYear from 'dayjs/plugin/quarterOfYear';\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\n\nimport 'dayjs/locale/ru';\nimport 'dayjs/locale/en';\n\ndayjs.extend(customParseFormat);\ndayjs.extend(quarterOfYear);\ndayjs.extend(advancedFormat);\n\nexport const customDayjs = dayjs;\n"],"names":["dayjs","extend","customParseFormat","quarterOfYear","advancedFormat","customDayjs"],"mappings":";;;;;;;;;;;AAQAA,KAAK,CAACC,MAAM,CAACC,iBAAiB,CAAC,CAAA;AAC/BF,KAAK,CAACC,MAAM,CAACE,aAAa,CAAC,CAAA;AAC3BH,KAAK,CAACC,MAAM,CAACG,cAAc,CAAC,CAAA;AAErB,IAAMC,WAAW,GAAGL;;;;"}

package/emotion/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js

@@ -47,7 +47,7 @@ var comboboxItemRoot = exports.comboboxItemRoot = function comboboxItemRoot(Root
       rest = _objectWithoutProperties(_ref, _excluded);
     var uniqId = (0, _plasmaCore.safeUseId)();
     var innerId = id || uniqId;
-    var withComboboxItemIsSelected = checked || isSelected ? _Combobox.classes.comboboxItemIsSelected : undefined;
+    var withComboboxItemIsSelected = checked || isSelected ? _Combobox.classes.comboboxItemIsDisabled : undefined;
     var withComboboxItemIsDisabled = disabled ? _Combobox.classes.comboboxItemIsDisabled : undefined;
     var handleOnClick = (0, _react.useCallback)(function (event) {
       if (disabled) {

package/emotion/cjs/components/DatePicker/DatePicker.template-doc.mdx

@@ -70,6 +70,38 @@ export function App() {
 }
 ```
 
+### Язык даты
+Язык даты задается с помощью свойства `lang`.
+
+| Обозначение | Отображение | Описание            |
+|-------------|-------------|---------------------|
+| ru          | June        | Английский Язык     |
+| en          | июнь        | Русский язык        |
+
+По умолчанию используется `ru`
+
+```tsx live
+import React from 'react';
+import { DatePicker } from '@salutejs/plasma-b2c';
+import { IconDone } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style={{ height: "450px" }}>
+            <DatePicker
+                label="Лейбл"
+                leftHelper="Подсказка к полю"
+                placeholder="Введите дату"
+                format="DD MMMM YYYY"
+                lang="en"
+                maskWithFormat
+                contentRight={<IconDone size="s" />}
+            />
+        </div>
+    );
+}
+```
+
 ### Валидация и индикация успешного ввода даты.
 За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
 В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:

package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -17,7 +17,7 @@ var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _RangeDate = /*#__PURE__*/require("./RangeDate.styles");
 var _RangeDatePopover = /*#__PURE__*/require("./RangeDatePopover/RangeDatePopover");
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -70,6 +70,8 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -116,19 +118,19 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format)),
+    var _useState7 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultFirstDate, format)),
+    var _useState9 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang)),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format)),
+    var _useState11 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultSecondDate, format)),
+    var _useState13 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang)),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -142,6 +144,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -160,6 +163,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -244,13 +248,19 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       });
     }, [opened]);
     (0, _react.useEffect)(function () {
-      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format));
-      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format));
+      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
     }, [defaultFirstDate]);
     (0, _react.useEffect)(function () {
-      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format));
-      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format));
+      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
     }, [defaultSecondDate]);
+    (0, _react.useEffect)(function () {
+      setCalendarFirstValue((0, _dateHelper.formatCalendarValue)(defaultFirstDate, format, lang));
+      setInputFirstValue((0, _dateHelper.formatInputValue)(defaultFirstDate, format, lang));
+      setCalendarSecondValue((0, _dateHelper.formatCalendarValue)(defaultSecondDate, format, lang));
+      setInputSecondValue((0, _dateHelper.formatInputValue)(defaultSecondDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: rootRef,
       view: view,

package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
 var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -55,6 +55,8 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -86,11 +88,11 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format)),
+    var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format)),
+    var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)(defaultDate, format, lang)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -105,6 +107,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
+        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -154,9 +157,13 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     (0, _react.useEffect)(function () {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format));
-      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
     }, [defaultDate]);
+    (0, _react.useEffect)(function () {
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(defaultDate, format, lang));
+    }, [format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       size: size,

package/emotion/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -13,6 +13,8 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     setIsInnerOpen = _ref.setIsInnerOpen,
     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,
@@ -43,9 +45,9 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     if (!format) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue));
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
-    setInputValue((0, _dateHelper.formatInputValue)(newValue, format));
+    setInputValue((0, _dateHelper.formatInputValue)(newValue, format, lang));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -58,17 +60,17 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format));
-      setInputValue((0, _dateHelper.formatInputValue)(date, format));
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)(date, format, lang));
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
     }
     var formatString = applyFormat ? format : undefined;
-    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString),
+    var _getDateFromFormat = (0, _dateHelper.getDateFromFormat)(date, formatString, lang),
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format));
-    setInputValue((0, _dateHelper.formatInputValue)(newDate, format));
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)(newDate, format, lang));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

package/emotion/cjs/components/DatePicker/utils/dateHelper.js

@@ -5,41 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
-var formatInputValue = exports.formatInputValue = function formatInputValue(value, format) {
-  if (!value) {
+var formatInputValue = exports.formatInputValue = function formatInputValue(value, format, lang) {
+  if (!value || !lang) {
     return '';
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format).format(format);
+    return (0, _datejs.customDayjs)(value, format).locale(lang).format(format);
   }
   if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).format(format);
+    return (0, _datejs.customDayjs)(value).locale(lang).format(format);
   }
   return String(value);
 };
-var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format) {
-  if (!value) {
+var formatCalendarValue = exports.formatCalendarValue = function formatCalendarValue(value, format, lang) {
+  if (!value || !lang) {
     return undefined;
   }
   if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
-    return (0, _datejs.customDayjs)(value, format, true).toDate();
+    return (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate();
   }
   if (String(new Date(value)) !== 'Invalid Date') {
-    return (0, _datejs.customDayjs)(value).toDate();
+    return (0, _datejs.customDayjs)(value).locale(lang).toDate();
   }
   return undefined;
 };
-var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format) {
-  if (format && (0, _datejs.customDayjs)(value, format, true).isValid()) {
+var getDateFromFormat = exports.getDateFromFormat = function getDateFromFormat(value, format, lang) {
+  if (format && (0, _datejs.customDayjs)(value, format, true).isValid() && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value, format, true).toDate(),
+      value: (0, _datejs.customDayjs)(value, format, true).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };
   }
-  if (!format && String(new Date(value)) !== 'Invalid Date') {
+  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
     return {
-      value: (0, _datejs.customDayjs)(value).toDate(),
+      value: (0, _datejs.customDayjs)(value).locale(lang).toDate(),
       isError: false,
       isSuccess: true
     };