@jetbrains/ring-ui 5.1.22 → 5.1.24

package/components/date-picker/consts.d.ts

@@ -10,6 +10,7 @@ declare const units: {
 export default units;
 export declare const YEAR = 12;
 export declare const WEEK = 7;
+export declare const FIFTH_DAY = 4;
 export declare const weekdays: {
     MO: number;
     TU: number;
@@ -26,6 +27,9 @@ export declare const DOUBLE = 2;
 export declare const HALF = 0.5;
 export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
 export declare function parseTime(time: string): string | null;
+export declare function shiftWeekArray<T>(arr: T[], startOfWeek: number): T[];
+export declare function getWeekStartsOn(locale: Locale | undefined): number;
+export declare function getDayNumInWeek(locale: Locale | undefined, day: number): number;
 export interface DateInputTranslations {
     addFirstDate?: string;
     addSecondDate?: string;

package/components/date-picker/consts.js

@@ -12,6 +12,7 @@ const units = {
 export default units;
 export const YEAR = 12;
 export const WEEK = 7;
+export const FIFTH_DAY = 4;
 export const weekdays = {
     MO: 1,
     TU: 2,
@@ -42,3 +43,14 @@ export function parseTime(time) {
     }
     return result;
 }
+export function shiftWeekArray(arr, startOfWeek) {
+    const shiftTimes = startOfWeek - 1;
+    return arr.slice(shiftTimes).concat(arr.slice(0, shiftTimes));
+}
+export function getWeekStartsOn(locale) {
+    return locale?.options?.weekStartsOn ?? weekdays.MO;
+}
+export function getDayNumInWeek(locale, day) {
+    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
+    return weekDays.indexOf(day);
+}

package/components/date-picker/date-picker.css

@@ -334,7 +334,7 @@
   border-radius: var(--ring-border-radius);
 }
 
-.Monday {
+.Day1 {
   position: relative;
 
   &::before,
@@ -401,13 +401,13 @@
     left: 0;
   }
 
-  &.Monday {
+  &.Day1 {
     &::after {
       height: calc(unit * 5);
     }
   }
 
-  & + .Tuesday {
+  & + .Day2 {
     position: relative;
 
     &::before {
@@ -425,9 +425,9 @@
   }
 }
 
-.Friday,
-.Saturday,
-.Sunday {
+.Day5,
+.Day6,
+.Day7 {
   &::before,
   &::after {
     height: calc(unit * 5);
@@ -437,7 +437,7 @@
 .spread {
   &::before,
   &::after,
-  & + .Tuesday::before {
+  & + .Day2::before {
     transition: none;
 
     background-color: var(--ring-selected-background-color);
@@ -447,7 +447,7 @@
 .activeSpread {
   &::before,
   &::after,
-  & + .Tuesday::before {
+  & + .Day2::before {
     transition: none;
 
     background-color: var(--ring-date-picker-hover-color);

package/components/date-picker/day.d.ts

@@ -15,6 +15,7 @@ export default class Day extends Component<DayProps> {
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
         onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
         minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
     };

package/components/date-picker/day.js

@@ -10,7 +10,7 @@ import isBefore from 'date-fns/isBefore';
 import isSameDay from 'date-fns/isSameDay';
 import isToday from 'date-fns/isToday';
 import startOfDay from 'date-fns/startOfDay';
-import { dateType, weekdays } from './consts';
+import { dateType, weekdays, getDayNumInWeek } from './consts';
 import styles from './date-picker.css';
 let hoverTO;
 export default class Day extends Component {
@@ -23,6 +23,7 @@ export default class Day extends Component {
         onSelect: PropTypes.func,
         parseDateInput: PropTypes.func,
         onHover: PropTypes.func,
+        locale: PropTypes.object,
         minDate: dateType,
         maxDate: dateType
     };
@@ -55,8 +56,9 @@ export default class Day extends Component {
         return this.props.parseDateInput(text);
     }
     render() {
-        const { day, from, currentRange, activeRange, empty } = this.props;
+        const { day, from, currentRange, activeRange, empty, locale } = this.props;
         const reverse = activeRange && activeRange[1] === from;
+        const dayInWeek = getDayNumInWeek(locale, getDay(day)) + 1;
         function makeSpreadRange(range) {
             return range && [range[0], addDays(range[1], 1)];
         }
@@ -65,7 +67,7 @@ export default class Day extends Component {
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work
-        <button type="button" className={classNames(styles.day, styles[format(day, 'EEEE')], {
+        <button type="button" className={classNames(styles.day, styles[`Day${dayInWeek}`], {
                 [styles.current]: ['date', 'from', 'to'].some(this.is),
                 [styles.active]: !disabled && this.is('activeDate'),
                 [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),

package/components/date-picker/month-names.d.ts

@@ -7,7 +7,7 @@ declare namespace MonthNames {
         scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
         currentRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default MonthNames;

package/components/date-picker/month-names.js

@@ -15,7 +15,7 @@ class MonthName extends PureComponent {
     static propTypes = {
         month: dateType,
         onScrollChange: PropTypes.func,
-        locale: PropTypes.string
+        locale: PropTypes.object
     };
     handleClick = () => {
         const end = endOfMonth(this.props.month);
@@ -58,5 +58,5 @@ MonthNames.propTypes = {
     scrollDate: dateType,
     onScrollChange: PropTypes.func,
     currentRange: PropTypes.arrayOf(dateType),
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/date-picker/month.d.ts

@@ -8,7 +8,7 @@ declare function Month(props: MonthProps): React.JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Month;

package/components/date-picker/month.js

@@ -6,7 +6,7 @@ import getDay from 'date-fns/getDay';
 import setDay from 'date-fns/setDay';
 import PropTypes from 'prop-types';
 import Day from './day';
-import { dateType, WEEK, weekdays } from './consts';
+import { dateType, WEEK, weekdays, shiftWeekArray, getWeekStartsOn, FIFTH_DAY } from './consts';
 import styles from './date-picker.css';
 export default function Month(props) {
     const start = props.month;
@@ -14,7 +14,9 @@ export default function Month(props) {
     const { locale } = props;
     // pad with empty cells starting from last friday
     const weekday = getDay(start);
-    let day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale));
+    const fifthDayOfWeek = weekDays[FIFTH_DAY];
+    let day = setDay(start, weekday >= fifthDayOfWeek ? fifthDayOfWeek : fifthDayOfWeek - WEEK);
     const days = [];
     while (day < end) {
         days.push(day);
@@ -29,5 +31,5 @@ export default function Month(props) {
 }
 Month.propTypes = {
     month: dateType,
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/date-picker/weekdays.d.ts

@@ -7,7 +7,7 @@ interface WeekdaysProps {
 declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Weekdays;

package/components/date-picker/weekdays.js

@@ -5,10 +5,10 @@ import format from 'date-fns/format';
 import setDay from 'date-fns/setDay';
 import startOfDay from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
-import { weekdays } from './consts';
+import { getWeekStartsOn, shiftWeekArray, weekdays } from './consts';
 import styles from './date-picker.css';
 export default function Weekdays(props) {
-    const days = Object.values(weekdays).
+    const days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).
         map(value => startOfDay(setDay(new Date(), value)));
     const { locale } = props;
     return (<div className={styles.weekdays}>
@@ -20,5 +20,5 @@ export default function Weekdays(props) {
     </div>);
 }
 Weekdays.propTypes = {
-    locale: PropTypes.string
+    locale: PropTypes.object
 };

package/components/editable-heading/editable-heading.css

@@ -70,12 +70,15 @@
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 
-  word-wrap: break-word;
+  word-break: break-all;
 
   border-radius: var(--ring-border-radius);
 
   .multiline & {
     -webkit-line-clamp: 3;
+
+    word-wrap: break-word;
+    word-break: normal;
   }
 }
 

package/dist/_helpers/_rollupPluginBabelHelpers.js

@@ -347,6 +347,20 @@ function _regeneratorRuntime() {
     }
   }, e;
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -630,19 +644,5 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
     }
   };
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 export { _defineProperty as _, _inherits as a, _createSuper as b, _classCallCheck as c, _createClass as d, _objectWithoutProperties as e, _extends as f, _objectSpread2 as g, _asyncToGenerator as h, _regeneratorRuntime as i, _slicedToArray as j, _assertThisInitialized as k, _toConsumableArray as l, _createForOfIteratorHelper as m, _get as n, _getPrototypeOf as o, _toPropertyKey as p };

package/dist/_helpers/date-picker.js

@@ -1,3 +1,3 @@
-var modules_0c7b7d96 = {"unit":"i__const_unit_0","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","cellSize":"24px","calHeight":"288px","calWidth":"296px","yearHeight":"32px","yearWidth":"48px","light":"light_rui_2ac4","clearfix":"clearfix_rui_e0bd","font":"font_rui_e0bd","font-lower":"font-lower_rui_e0bd font_rui_e0bd","font-smaller":"font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-smaller-lower":"font-smaller-lower_rui_e0bd font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger-lower":"font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger":"font-larger_rui_e0bd font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","thin-font":"thin-font_rui_e0bd","monospace-font":"monospace-font_rui_e0bd","ellipsis":"ellipsis_rui_e0bd","resetButton":"resetButton_rui_e0bd","container":"container_rui_e0bd","hoverable":"hoverable_rui_e0bd","datePicker":"datePicker_rui_e0bd","inline":"inline_rui_e0bd","sizeS":"sizeS_rui_e0bd","sizeM":"sizeM_rui_e0bd","sizeL":"sizeL_rui_e0bd","sizeFULL":"sizeFULL_rui_e0bd","sizeAUTO":"sizeAUTO_rui_e0bd","displayDate":"displayDate_rui_e0bd","displayRange":"displayRange_rui_e0bd","clear":"clear_rui_e0bd","datePopup":"datePopup_rui_e0bd","filterWrapper":"filterWrapper_rui_e0bd filterWrapper_rui_531d","filter":"filter_rui_e0bd filter_rui_531d","calendarIcon":"calendarIcon_rui_e0bd","anchor":"anchor_rui_e0bd","anchorContent":"anchorContent_rui_e0bd","chevronDownIcon":"chevronDownIcon_rui_e0bd","fromInput":"fromInput_rui_e0bd","fromInputWithDivider":"fromInputWithDivider_rui_e0bd","toInput":"toInput_rui_e0bd","dateInput":"dateInput_rui_e0bd","timeInputWithDivider":"timeInputWithDivider_rui_e0bd","weekdays":"weekdays_rui_e0bd","weekday":"weekday_rui_e0bd","weekend":"weekend_rui_e0bd","calendar":"calendar_rui_e0bd","months":"months_rui_e0bd","days":"days_rui_e0bd","month":"month_rui_e0bd","monthTitle":"monthTitle_rui_e0bd","day":"day_rui_e0bd resetButton_rui_8bff","between":"between_rui_e0bd","activeBetween":"activeBetween_rui_e0bd","current":"current_rui_e0bd","active":"active_rui_e0bd","disabled":"disabled_rui_e0bd","from":"from_rui_e0bd","to":"to_rui_e0bd","Monday":"Monday_rui_e0bd","spread":"spread_rui_e0bd","activeSpread":"activeSpread_rui_e0bd","first":"first_rui_e0bd","Tuesday":"Tuesday_rui_e0bd","Friday":"Friday_rui_e0bd","Saturday":"Saturday_rui_e0bd","Sunday":"Sunday_rui_e0bd","empty":"empty_rui_e0bd","today":"today_rui_e0bd","year":"year_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthNames":"monthNames_rui_e0bd","monthName":"monthName_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthSlider":"monthSlider_rui_e0bd resetButton_rui_8bff","dragging":"dragging_rui_e0bd","range":"range_rui_e0bd","years":"years_rui_e0bd","currentYear":"currentYear_rui_e0bd"};
+var modules_0c7b7d96 = {"unit":"i__const_unit_0","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","cellSize":"24px","calHeight":"288px","calWidth":"296px","yearHeight":"32px","yearWidth":"48px","light":"light_rui_2ac4","clearfix":"clearfix_rui_e0bd","font":"font_rui_e0bd","font-lower":"font-lower_rui_e0bd font_rui_e0bd","font-smaller":"font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-smaller-lower":"font-smaller-lower_rui_e0bd font-smaller_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger-lower":"font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","font-larger":"font-larger_rui_e0bd font-larger-lower_rui_e0bd font-lower_rui_e0bd font_rui_e0bd","thin-font":"thin-font_rui_e0bd","monospace-font":"monospace-font_rui_e0bd","ellipsis":"ellipsis_rui_e0bd","resetButton":"resetButton_rui_e0bd","container":"container_rui_e0bd","hoverable":"hoverable_rui_e0bd","datePicker":"datePicker_rui_e0bd","inline":"inline_rui_e0bd","sizeS":"sizeS_rui_e0bd","sizeM":"sizeM_rui_e0bd","sizeL":"sizeL_rui_e0bd","sizeFULL":"sizeFULL_rui_e0bd","sizeAUTO":"sizeAUTO_rui_e0bd","displayDate":"displayDate_rui_e0bd","displayRange":"displayRange_rui_e0bd","clear":"clear_rui_e0bd","datePopup":"datePopup_rui_e0bd","filterWrapper":"filterWrapper_rui_e0bd filterWrapper_rui_531d","filter":"filter_rui_e0bd filter_rui_531d","calendarIcon":"calendarIcon_rui_e0bd","anchor":"anchor_rui_e0bd","anchorContent":"anchorContent_rui_e0bd","chevronDownIcon":"chevronDownIcon_rui_e0bd","fromInput":"fromInput_rui_e0bd","fromInputWithDivider":"fromInputWithDivider_rui_e0bd","toInput":"toInput_rui_e0bd","dateInput":"dateInput_rui_e0bd","timeInputWithDivider":"timeInputWithDivider_rui_e0bd","weekdays":"weekdays_rui_e0bd","weekday":"weekday_rui_e0bd","weekend":"weekend_rui_e0bd","calendar":"calendar_rui_e0bd","months":"months_rui_e0bd","days":"days_rui_e0bd","month":"month_rui_e0bd","monthTitle":"monthTitle_rui_e0bd","day":"day_rui_e0bd resetButton_rui_8bff","between":"between_rui_e0bd","activeBetween":"activeBetween_rui_e0bd","current":"current_rui_e0bd","active":"active_rui_e0bd","disabled":"disabled_rui_e0bd","from":"from_rui_e0bd","to":"to_rui_e0bd","Day1":"Day1_rui_e0bd","spread":"spread_rui_e0bd","activeSpread":"activeSpread_rui_e0bd","first":"first_rui_e0bd","Day2":"Day2_rui_e0bd","Day5":"Day5_rui_e0bd","Day6":"Day6_rui_e0bd","Day7":"Day7_rui_e0bd","empty":"empty_rui_e0bd","today":"today_rui_e0bd","year":"year_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthNames":"monthNames_rui_e0bd","monthName":"monthName_rui_e0bd hoverable_rui_e0bd resetButton_rui_8bff","monthSlider":"monthSlider_rui_e0bd resetButton_rui_8bff","dragging":"dragging_rui_e0bd","range":"range_rui_e0bd","years":"years_rui_e0bd","currentYear":"currentYear_rui_e0bd"};
 
 export { modules_0c7b7d96 as m };

package/dist/date-picker/consts.d.ts

@@ -10,6 +10,7 @@ declare const units: {
 export default units;
 export declare const YEAR = 12;
 export declare const WEEK = 7;
+export declare const FIFTH_DAY = 4;
 export declare const weekdays: {
     MO: number;
     TU: number;
@@ -26,6 +27,9 @@ export declare const DOUBLE = 2;
 export declare const HALF = 0.5;
 export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
 export declare function parseTime(time: string): string | null;
+export declare function shiftWeekArray<T>(arr: T[], startOfWeek: number): T[];
+export declare function getWeekStartsOn(locale: Locale | undefined): number;
+export declare function getDayNumInWeek(locale: Locale | undefined, day: number): number;
 export interface DateInputTranslations {
     addFirstDate?: string;
     addSecondDate?: string;

package/dist/date-picker/consts.js

@@ -1,4 +1,8 @@
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
 import PropTypes from 'prop-types';
 import add from 'date-fns/add';
 
@@ -13,6 +17,7 @@ var units = {
 };
 var YEAR = 12;
 var WEEK = 7;
+var FIFTH_DAY = 4;
 var weekdays = {
   MO: 1,
   TU: 2,
@@ -42,5 +47,17 @@ function parseTime(time) {
   }
   return result;
 }
+function shiftWeekArray(arr, startOfWeek) {
+  var shiftTimes = startOfWeek - 1;
+  return arr.slice(shiftTimes).concat(arr.slice(0, shiftTimes));
+}
+function getWeekStartsOn(locale) {
+  var _locale$options$weekS, _locale$options;
+  return (_locale$options$weekS = locale === null || locale === void 0 || (_locale$options = locale.options) === null || _locale$options === void 0 ? void 0 : _locale$options.weekStartsOn) !== null && _locale$options$weekS !== void 0 ? _locale$options$weekS : weekdays.MO;
+}
+function getDayNumInWeek(locale, day) {
+  var weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
+  return weekDays.indexOf(day);
+}
 
-export { DOUBLE, HALF, MIDDLE_DAY, WEEK, YEAR, dateType, units as default, parseTime, weekdays, yearDuration, yearScrollSpeed };
+export { DOUBLE, FIFTH_DAY, HALF, MIDDLE_DAY, WEEK, YEAR, dateType, units as default, getDayNumInWeek, getWeekStartsOn, parseTime, shiftWeekArray, weekdays, yearDuration, yearScrollSpeed };

package/dist/date-picker/date-input.js

@@ -39,6 +39,8 @@ import '../_helpers/control-label.js';
 import '../_helpers/input.js';
 import '../i18n/i18n.js';
 import 'core-js/modules/es.set.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var DateInput = /*#__PURE__*/function (_React$PureComponent) {

package/dist/date-picker/date-picker.js

@@ -86,6 +86,7 @@ import 'date-fns/isBefore';
 import 'date-fns/startOfDay';
 import 'date-fns';
 import './date-input.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 import './months.js';
 import 'date-fns/addMonths';

package/dist/date-picker/date-popup.js

@@ -68,6 +68,8 @@ import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import 'date-fns/getDate';
 import 'date-fns/isToday';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 import './month-names.js';
 import 'date-fns/isThisMonth';

package/dist/date-picker/day.d.ts

@@ -15,6 +15,7 @@ export default class Day extends Component<DayProps> {
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
         onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
         minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
     };

package/dist/date-picker/day.js

@@ -15,9 +15,12 @@ import isBefore from 'date-fns/isBefore';
 import isSameDay from 'date-fns/isSameDay';
 import isToday from 'date-fns/isToday';
 import startOfDay from 'date-fns/startOfDay';
-import { dateType, weekdays } from './consts.js';
+import { dateType, getDayNumInWeek, weekdays } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var hoverTO;
@@ -74,8 +77,10 @@ var Day = /*#__PURE__*/function (_Component) {
         from = _this$props.from,
         currentRange = _this$props.currentRange,
         activeRange = _this$props.activeRange,
-        empty = _this$props.empty;
+        empty = _this$props.empty,
+        locale = _this$props.locale;
       var reverse = activeRange && activeRange[1] === from;
+      var dayInWeek = getDayNumInWeek(locale, getDay(day)) + 1;
       function makeSpreadRange(range) {
         return range && [range[0], addDays(range[1], 1)];
       }
@@ -87,7 +92,7 @@ var Day = /*#__PURE__*/function (_Component) {
         // TODO make keyboard navigation actually work
         React.createElement("button", {
           type: "button",
-          className: classNames(modules_0c7b7d96.day, modules_0c7b7d96[format(day, 'EEEE')], {
+          className: classNames(modules_0c7b7d96.day, modules_0c7b7d96["Day".concat(dayInWeek)], {
             [modules_0c7b7d96.current]: ['date', 'from', 'to'].some(this.is),
             [modules_0c7b7d96.active]: !disabled && this.is('activeDate'),
             [modules_0c7b7d96.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
@@ -126,6 +131,7 @@ _defineProperty(Day, "propTypes", {
   onSelect: PropTypes.func,
   parseDateInput: PropTypes.func,
   onHover: PropTypes.func,
+  locale: PropTypes.object,
   minDate: dateType,
   maxDate: dateType
 });

package/dist/date-picker/month-names.d.ts

@@ -7,7 +7,7 @@ declare namespace MonthNames {
         scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
         currentRange: PropTypes.Requireable<(NonNullable<string | number | Date | null | undefined> | null | undefined)[]>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default MonthNames;

package/dist/date-picker/month-names.js

@@ -17,6 +17,9 @@ import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import 'date-fns/addYears';
 import 'date-fns/subYears';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var MonthName = /*#__PURE__*/function (_PureComponent) {
@@ -57,7 +60,7 @@ var MonthName = /*#__PURE__*/function (_PureComponent) {
 _defineProperty(MonthName, "propTypes", {
   month: dateType,
   onScrollChange: PropTypes.func,
-  locale: PropTypes.string
+  locale: PropTypes.object
 });
 function MonthNames(props) {
   var scrollDate = props.scrollDate,
@@ -104,7 +107,7 @@ MonthNames.propTypes = {
   scrollDate: dateType,
   onScrollChange: PropTypes.func,
   currentRange: PropTypes.arrayOf(dateType),
-  locale: PropTypes.string
+  locale: PropTypes.object
 };
 
 export { MonthNames as default };

package/dist/date-picker/month-slider.js

@@ -11,6 +11,9 @@ import linearFunction from '../global/linear-function.js';
 import units, { dateType, yearScrollSpeed } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var COVERYEARS = 3;

package/dist/date-picker/month.d.ts

@@ -8,7 +8,7 @@ declare function Month(props: MonthProps): React.JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Month;

package/dist/date-picker/month.js

@@ -1,4 +1,5 @@
 import { f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.array.map.js';
 import React from 'react';
 import addDays from 'date-fns/addDays';
@@ -8,7 +9,7 @@ import getDay from 'date-fns/getDay';
 import setDay from 'date-fns/setDay';
 import PropTypes from 'prop-types';
 import Day from './day.js';
-import { dateType, weekdays, WEEK } from './consts.js';
+import { dateType, shiftWeekArray, getWeekStartsOn, weekdays, FIFTH_DAY, WEEK } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.object.to-string.js';
@@ -22,6 +23,8 @@ import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/startOfDay';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 function Month(props) {
@@ -30,7 +33,9 @@ function Month(props) {
   var locale = props.locale;
   // pad with empty cells starting from last friday
   var weekday = getDay(start);
-  var day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+  var weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale));
+  var fifthDayOfWeek = weekDays[FIFTH_DAY];
+  var day = setDay(start, weekday >= fifthDayOfWeek ? fifthDayOfWeek : fifthDayOfWeek - WEEK);
   var days = [];
   while (day < end) {
     days.push(day);
@@ -52,7 +57,7 @@ function Month(props) {
 }
 Month.propTypes = {
   month: dateType,
-  locale: PropTypes.string
+  locale: PropTypes.object
 };
 
 export { Month as default };

package/dist/date-picker/months.js

@@ -15,6 +15,7 @@ import Month from './month.js';
 import MonthNames from './month-names.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import units, { dateType, DOUBLE, HALF, WEEK, weekdays } from './consts.js';
+import 'core-js/modules/es.object.values.js';
 import 'date-fns/addDays';
 import 'date-fns/format';
 import 'date-fns/setDay';
@@ -37,6 +38,8 @@ import './month-slider.js';
 import 'date-fns/addYears';
 import 'date-fns/subYears';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var unit = units.unit,

package/dist/date-picker/weekdays.d.ts

@@ -7,7 +7,7 @@ interface WeekdaysProps {
 declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
-        locale: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
     };
 }
 export default Weekdays;

package/dist/date-picker/weekdays.js

@@ -9,13 +9,16 @@ import format from 'date-fns/format';
 import setDay from 'date-fns/setDay';
 import startOfDay from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
-import { weekdays } from './consts.js';
+import { shiftWeekArray, getWeekStartsOn, weekdays } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 function Weekdays(props) {
-  var days = Object.values(weekdays).map(function (value) {
+  var days = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale)).map(function (value) {
     return startOfDay(setDay(new Date(), value));
   });
   var locale = props.locale;
@@ -33,7 +36,7 @@ function Weekdays(props) {
   }));
 }
 Weekdays.propTypes = {
-  locale: PropTypes.string
+  locale: PropTypes.object
 };
 
 export { Weekdays as default };

package/dist/date-picker/years.js

@@ -16,6 +16,9 @@ import linearFunction from '../global/linear-function.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import units, { dateType, yearDuration, DOUBLE, HALF } from './consts.js';
 import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
 import 'date-fns/add';
 
 var yearHeight = units.yearHeight,