@salutejs/plasma-new-hope 0.149.1-canary.1448.10989541108.0 → 0.150.0-canary.1428.10987385696.0

package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -15,7 +15,7 @@ var _CalendarBase = /*#__PURE__*/require("../CalendarBase/CalendarBase.styles");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _CalendarDouble = /*#__PURE__*/require("./CalendarDouble.styles");
 var _StyledSeparator, _StyledSeparator2, _StyledSeparator3, _StyledSeparator4;
-var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
+var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "locale"];
 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); }
@@ -47,6 +47,8 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
       onChangeValue = _ref.onChangeValue,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'ru' : _ref$locale,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = (0, _react.useMemo)(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -220,7 +222,8 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       type: calendarState,
       onPrev: handlePrev,
       onNext: handleNext,
-      onUpdateCalendarState: handleUpdateCalendarState
+      onUpdateCalendarState: handleUpdateCalendarState,
+      locale: locale
     }), /*#__PURE__*/_react["default"].createElement(_CalendarDouble.StyledWrapper, null, calendarState === _types.CalendarState.Days && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ui.CalendarDays, {
       value: externalValue,
       date: firstDate,
@@ -236,6 +239,7 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true
     }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_react["default"].createElement(_CalendarDouble.StyledSeparator, null)), /*#__PURE__*/_react["default"].createElement(_ui.CalendarDays, {
       value: externalValue,
@@ -252,6 +256,7 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true,
       isSecond: true
     })), calendarState === _types.CalendarState.Months && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ui.CalendarMonths, {
@@ -268,6 +273,7 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true
     }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_react["default"].createElement(_CalendarDouble.StyledSeparator, null)), /*#__PURE__*/_react["default"].createElement(_ui.CalendarMonths, {
       value: externalValue,
@@ -283,6 +289,7 @@ var calendarDoubleRoot = exports.calendarDoubleRoot = function calendarDoubleRoo
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true,
       isSecond: true
     })), calendarState === _types.CalendarState.Quarters && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ui.CalendarQuarters, {

package/styled-components/cjs/components/Calendar/hooks/useMonths.js

@@ -16,9 +16,11 @@ var useMonths = exports.useMonths = function useMonths(_ref) {
     eventList = _ref.eventList,
     disabledList = _ref.disabledList,
     min = _ref.min,
-    max = _ref.max;
+    max = _ref.max,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'ru' : _ref$locale;
   return (0, _react.useMemo)(function () {
-    var months = _utils.SHORT_MONTH_NAME.map(function (monthName, monthIndex) {
+    var months = _utils.SHORT_MONTH_NAME[locale].map(function (monthName, monthIndex) {
       return {
         monthName: monthName,
         monthIndex: monthIndex,
@@ -27,7 +29,7 @@ var useMonths = exports.useMonths = function useMonths(_ref) {
           return (0, _utils.isSelectedMonth)(date, monthIndex, v);
         })) : (0, _utils.isSelectedMonth)(date, monthIndex, value),
         inRange: Array.isArray(value) ? (0, _utils.isDateInRange)(date.year, monthIndex, 1, value) : false,
-        monthFullName: _utils.MONTH_NAMES[monthIndex],
+        monthFullName: _utils.MONTH_NAMES[locale][monthIndex],
         date: {
           year: date.year,
           monthIndex: monthIndex,
@@ -47,5 +49,5 @@ var useMonths = exports.useMonths = function useMonths(_ref) {
       return (0, _utils.getMatrix)(modifiedMonths, 3);
     }
     return (0, _utils.getMatrix)(months, 3);
-  }, [date, value, eventList, disabledList, max, min]);
+  }, [date, value, eventList, disabledList, max, min, locale]);
 };

package/styled-components/cjs/components/Calendar/ui/CalendarDays/CalendarDays.js

@@ -42,7 +42,9 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
     onChangeDay = _ref.onChangeDay,
     onHoverDay = _ref.onHoverDay,
     onSetSelected = _ref.onSetSelected,
-    onKeyDown = _ref.onKeyDown;
+    onKeyDown = _ref.onKeyDown,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'ru' : _ref$locale;
   var _useDays = (0, _hooks.useDays)({
       date: currentDate,
       value: value,
@@ -113,7 +115,7 @@ var CalendarDays = exports.CalendarDays = function CalendarDays(_ref) {
     id: "withShift"
   }, "\u0414\u043B\u044F \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u043C \u0434\u0430\u0442\u0430\u043C \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0443 Shift.")), /*#__PURE__*/_react["default"].createElement(_CalendarDays.StyledFlex, {
     role: "row"
-  }, _utils.SHORT_DAY_NAMES.map(function (name) {
+  }, _utils.SHORT_DAY_NAMES[locale].map(function (name) {
     return /*#__PURE__*/_react["default"].createElement(_DateStructureItem.DateStructureItem, {
       role: "columnheader",
       "aria-label": _utils.FULL_DAY_NAMES[name],

package/styled-components/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -28,7 +28,8 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
     isDouble = _ref.isDouble,
     onPrev = _ref.onPrev,
     onNext = _ref.onNext,
-    onUpdateCalendarState = _ref.onUpdateCalendarState;
+    onUpdateCalendarState = _ref.onUpdateCalendarState,
+    locale = _ref.locale;
   var handleCalendarState = (0, _react.useCallback)(function () {
     var newSize = isDouble ? _reducer.sizeMap.Months["double"] : _reducer.sizeMap.Months.single;
     if (type === _types.CalendarState.Days) {
@@ -43,7 +44,7 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
       return '';
     }
     if (type === _types.CalendarState.Days) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, _utils.MONTH_NAMES[date.monthIndex]), /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, date.year, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownFill, {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, _utils.MONTH_NAMES[locale][date.monthIndex]), /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledHeaderDate, null, date.year, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       })));
@@ -62,7 +63,7 @@ var CalendarHeader = exports.CalendarHeader = function CalendarHeader(_ref) {
       }));
     }
     return '';
-  }, [type, startYear, size]);
+  }, [type, startYear, size, locale]);
   var currentCalendarType = (0, _utils.getCalendarType)(type);
   var PreviousButton = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react["default"].createElement(_CalendarHeader.StyledArrow, {

package/styled-components/cjs/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -40,14 +40,16 @@ var CalendarMonths = exports.CalendarMonths = function CalendarMonths(_ref) {
     onChangeMonth = _ref.onChangeMonth,
     onHoverMonth = _ref.onHoverMonth,
     onSetSelected = _ref.onSetSelected,
-    onKeyDown = _ref.onKeyDown;
+    onKeyDown = _ref.onKeyDown,
+    locale = _ref.locale;
   var _useMonths = (0, _hooks.useMonths)({
       date: currentDate,
       value: value,
       eventList: eventList,
       disabledList: disabledList,
       min: min,
-      max: max
+      max: max,
+      locale: locale
     }),
     _useMonths2 = _slicedToArray(_useMonths, 2),
     months = _useMonths2[0],

package/styled-components/cjs/components/Calendar/utils/calendarGridHelper.js

@@ -26,7 +26,7 @@ var getStartYear = exports.getStartYear = function getStartYear(year) {
   return Math.floor(year / _constants.YEAR_RENDER_COUNT) * _constants.YEAR_RENDER_COUNT;
 };
 var getNextDate = exports.getNextDate = function getNextDate(currentYear, currentMonth) {
-  return currentMonth + 1 === _constants.MONTH_NAMES.length ? [currentYear + 1, 0] : [currentYear, currentMonth + 1];
+  return currentMonth + 1 === _constants.MONTHS.length ? [currentYear + 1, 0] : [currentYear, currentMonth + 1];
 };
 var getPrevDate = exports.getPrevDate = function getPrevDate(currentYear, currentMonth) {
   return currentMonth - 1 < 0 ? [currentYear - 1, 11] : [currentYear, currentMonth - 1];

package/styled-components/cjs/components/Calendar/utils/constants.js

@@ -3,7 +3,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.FULL_DAY_NAMES = void 0;
+exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.MONTHS = exports.FULL_DAY_NAMES = void 0;
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var LOCALES = {
+  ru: 'ru-RU',
+  en: 'en-US'
+};
+var MONTHS = exports.MONTHS = /*#__PURE__*/Array.from({
+  length: 12
+}, function (_, i) {
+  return i + 1;
+});
+var WEEKS = /*#__PURE__*/Array.from({
+  length: 7
+}, function (_, i) {
+  return i + 1;
+});
+var callbackDayFormatter = function callbackDayFormatter(local, options) {
+  var dateFormatter = new Intl.DateTimeFormat(LOCALES[local], options);
+  return function (index) {
+    // INFO: Start for monday
+    var day = new Date(Date.UTC(2024, 0, index));
+    var _dateFormatter$format = dateFormatter.format(day),
+      _dateFormatter$format2 = _toArray(_dateFormatter$format),
+      first = _dateFormatter$format2[0],
+      rest = _dateFormatter$format2.slice(1);
+    return first.toUpperCase() + rest.join('');
+  };
+};
+var callbackMonthFormatter = function callbackMonthFormatter(local, options) {
+  var dateFormatter = new Intl.DateTimeFormat(LOCALES[local], options);
+  return function (month) {
+    var data = new Date(Date.UTC(2024, month - 1));
+    var _dateFormatter$format3 = dateFormatter.format(data),
+      _dateFormatter$format4 = _toArray(_dateFormatter$format3),
+      first = _dateFormatter$format4[0],
+      rest = _dateFormatter$format4.slice(1);
+    return first.toUpperCase() + rest.join('').replace('.', '');
+  };
+};
 var ROW_STEP = exports.ROW_STEP = 6;
 var ROW_MONTH_STEP = exports.ROW_MONTH_STEP = 4;
 var ROW_YEAR_STEP = exports.ROW_YEAR_STEP = 4;
@@ -34,7 +77,14 @@ var quarterDates = exports.quarterDates = {
     day: 1
   }
 };
-var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES = {
+  ru: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('ru', {
+    weekday: 'short'
+  })),
+  en: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('en', {
+    weekday: 'short'
+  }))
+};
 var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
   Пн: 'Понедельник',
   Вт: 'Вторник',
@@ -44,5 +94,19 @@ var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
   Сб: 'Суббота',
   Вс: 'Воскресенье'
 };
-var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME = ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
-var MONTH_NAMES = exports.MONTH_NAMES = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
+var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME = {
+  ru: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('ru', {
+    month: 'short'
+  })),
+  en: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('en', {
+    month: 'short'
+  }))
+};
+var MONTH_NAMES = exports.MONTH_NAMES = {
+  ru: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('ru', {
+    month: 'long'
+  })),
+  en: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('en', {
+    month: 'long'
+  }))
+};

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -313,6 +313,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       offset: offset,
       type: type,
       onToggle: handleToggle,
+      lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
         handleCommitFirstDate(firstDate, false, true, dateInfo);

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -34,6 +34,8 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
     offset = _ref.offset,
     type = _ref.type,
     size = _ref.size,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
@@ -63,6 +65,7 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
       disabledYearList: disabledYearList,
       min: min,
       max: max,
+      locale: lang,
       includeEdgeDates: includeEdgeDates,
       onChangeValue: onChangeValue,
       onChangeStartOfRange: onChangeStartOfRange
@@ -94,6 +97,7 @@ var RangeDatePopover = exports.RangeDatePopover = function RangeDatePopover(_ref
     min: min,
     max: max,
     type: type,
+    locale: lang,
     includeEdgeDates: includeEdgeDates,
     onChangeValue: onChangeValue,
     onChangeStartOfRange: onChangeStartOfRange

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

@@ -210,6 +210,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       max: max,
       includeEdgeDates: includeEdgeDates,
       isRange: false,
+      locale: lang,
       onChangeValue: function onChangeValue(date, dateInfo) {
         return handleCommitDate(date, false, true, dateInfo);
       }

package/styled-components/cjs/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx

@@ -32,6 +32,12 @@ const meta: Meta<typeof CalendarBase> = {
                 type: 'inline-radio',
             },
         },
+        locale: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'select',
+            },
+        },
     },
 };
 
@@ -75,7 +81,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
 };
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size, locale } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -97,6 +103,7 @@ const StoryDefault = (args: CalendarProps) => {
             min={min}
             max={max}
             includeEdgeDates={includeEdgeDates}
+            locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -110,6 +117,7 @@ export const Default: StoryObj<CalendarProps> = {
         isRange: false,
         includeEdgeDates: false,
         size: 'm',
+        locale: 'ru',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -194,12 +202,13 @@ export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
     const [currentState, setCurrentState] = useState('Days');
 
@@ -227,6 +236,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         ) : (
@@ -238,6 +248,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         );
@@ -278,6 +289,7 @@ export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryRange {...args} />,
 };

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -176,6 +176,7 @@ const StoryRange = ({
     secondValueError,
     secondValueSuccess,
     size,
+    lang,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
@@ -234,6 +235,7 @@ const StoryRange = ({
             onCommitSecondDate={(currentValue) => {
                 firstDate && currentValue && setIsOpen(false);
             }}
+            lang={lang}
             {...dividerIconProps}
             {...rest}
         />

package/styled-components/cjs/examples/plasma_web/components/Calendar/Calendar.stories.tsx

@@ -32,6 +32,12 @@ const meta: Meta<typeof CalendarBase> = {
                 type: 'inline-radio',
             },
         },
+        locale: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'select',
+            },
+        },
     },
 };
 
@@ -75,7 +81,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
 };
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size, locale } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -97,6 +103,7 @@ const StoryDefault = (args: CalendarProps) => {
             min={min}
             max={max}
             includeEdgeDates={includeEdgeDates}
+            locale={locale}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -110,6 +117,7 @@ export const Default: StoryObj<CalendarProps> = {
         isRange: false,
         includeEdgeDates: false,
         size: 'm',
+        locale: 'ru',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -194,12 +202,13 @@ export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = args;
+    const { min, max, includeEdgeDates, size, displayDouble, locale } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
     const [currentState, setCurrentState] = useState('Days');
 
@@ -227,6 +236,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         ) : (
@@ -238,6 +248,7 @@ const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) =
                 includeEdgeDates={includeEdgeDates}
                 type={type}
                 onChangeValue={handleOnChange}
+                locale={locale}
                 {...rest}
             />
         );
@@ -278,6 +289,7 @@ export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }
         max: defaultMaxDate,
         includeEdgeDates: false,
         displayDouble: false,
+        locale: 'ru',
     },
     render: (args) => <StoryRange {...args} />,
 };

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
+var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "locale"];
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,6 +37,8 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
       onChangeValue = _ref.onChangeValue,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'ru' : _ref$locale,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -151,7 +153,8 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       type: calendarState,
       onPrev: handlePrev,
       onNext: handleNext,
-      onUpdateCalendarState: handleUpdateCalendarState
+      onUpdateCalendarState: handleUpdateCalendarState,
+      locale: locale
     }), calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
       date: date,
@@ -166,7 +169,8 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       onSetSelected: onSelectIndexes,
       onHoverDay: setHoveredItem,
       onKeyDown: handleKeyDown,
-      outerRefs: outerRefs
+      outerRefs: outerRefs,
+      locale: locale
     }), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(CalendarMonths, {
       value: externalValue,
       date: date,
@@ -180,7 +184,8 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       onSetSelected: onSelectIndexes,
       onHoverMonth: setHoveredItem,
       onKeyDown: onKeyDown,
-      outerRefs: outerRefs
+      outerRefs: outerRefs,
+      locale: locale
     }), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(CalendarQuarters, {
       value: externalValue,
       date: date,

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -1,5 +1,5 @@
 var _StyledSeparator, _StyledSeparator2, _StyledSeparator3, _StyledSeparator4;
-var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
+var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "locale"];
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -38,6 +38,8 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
       onChangeValue = _ref.onChangeValue,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'ru' : _ref$locale,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -211,7 +213,8 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       type: calendarState,
       onPrev: handlePrev,
       onNext: handleNext,
-      onUpdateCalendarState: handleUpdateCalendarState
+      onUpdateCalendarState: handleUpdateCalendarState,
+      locale: locale
     }), /*#__PURE__*/React.createElement(StyledWrapper, null, calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
       date: firstDate,
@@ -227,6 +230,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true
     }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
@@ -243,6 +247,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true,
       isSecond: true
     })), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarMonths, {
@@ -259,6 +264,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true
     }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarMonths, {
       value: externalValue,
@@ -274,6 +280,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
+      locale: locale,
       isDouble: true,
       isSecond: true
     })), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarQuarters, {

package/styled-components/es/components/Calendar/hooks/useMonths.js

@@ -10,9 +10,11 @@ export var useMonths = function useMonths(_ref) {
     eventList = _ref.eventList,
     disabledList = _ref.disabledList,
     min = _ref.min,
-    max = _ref.max;
+    max = _ref.max,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'ru' : _ref$locale;
   return useMemo(function () {
-    var months = SHORT_MONTH_NAME.map(function (monthName, monthIndex) {
+    var months = SHORT_MONTH_NAME[locale].map(function (monthName, monthIndex) {
       return {
         monthName: monthName,
         monthIndex: monthIndex,
@@ -21,7 +23,7 @@ export var useMonths = function useMonths(_ref) {
           return isSelectedMonth(date, monthIndex, v);
         })) : isSelectedMonth(date, monthIndex, value),
         inRange: Array.isArray(value) ? isDateInRange(date.year, monthIndex, 1, value) : false,
-        monthFullName: MONTH_NAMES[monthIndex],
+        monthFullName: MONTH_NAMES[locale][monthIndex],
         date: {
           year: date.year,
           monthIndex: monthIndex,
@@ -41,5 +43,5 @@ export var useMonths = function useMonths(_ref) {
       return getMatrix(modifiedMonths, 3);
     }
     return getMatrix(months, 3);
-  }, [date, value, eventList, disabledList, max, min]);
+  }, [date, value, eventList, disabledList, max, min, locale]);
 };

package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js

@@ -34,7 +34,9 @@ export var CalendarDays = function CalendarDays(_ref) {
     onChangeDay = _ref.onChangeDay,
     onHoverDay = _ref.onHoverDay,
     onSetSelected = _ref.onSetSelected,
-    onKeyDown = _ref.onKeyDown;
+    onKeyDown = _ref.onKeyDown,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'ru' : _ref$locale;
   var _useDays = useDays({
       date: currentDate,
       value: value,
@@ -105,7 +107,7 @@ export var CalendarDays = function CalendarDays(_ref) {
     id: "withShift"
   }, "\u0414\u043B\u044F \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u043C \u0434\u0430\u0442\u0430\u043C \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0443 Shift.")), /*#__PURE__*/React.createElement(StyledFlex, {
     role: "row"
-  }, SHORT_DAY_NAMES.map(function (name) {
+  }, SHORT_DAY_NAMES[locale].map(function (name) {
     return /*#__PURE__*/React.createElement(DateStructureItem, {
       role: "columnheader",
       "aria-label": FULL_DAY_NAMES[name],