@zendeskgarden/react-datepickers 8.55.0 → 8.56.0

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -96,7 +96,6 @@ function _extends$2() {
 
     return target;
   };
-
   return _extends$2.apply(this, arguments);
 }
 
@@ -419,7 +418,7 @@ function getDate(dirtyDate) {
 var COMPONENT_ID$b = 'datepickers.menu';
 var StyledMenu = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.55.0'
+  'data-garden-version': '8.56.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -790,7 +789,7 @@ function getStartOfWeek(locale) {
 
 var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
 
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
@@ -808,7 +807,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 
 var _path;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -863,18 +862,19 @@ var Calendar$1 = React.forwardRef(function (_ref, ref) {
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
       isCompact = _ref.isCompact,
-      locale = _ref.locale;
+      locale = _ref.locale,
+      weekStartsOn = _ref.weekStartsOn;
   var _useDatepickerContext = useDatepickerContext$1(),
       state = _useDatepickerContext.state,
       dispatch = _useDatepickerContext.dispatch;
-  var weekStartsOn = getStartOfWeek(locale);
+  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   var monthStartDate = startOfMonth(state.previewDate);
   var monthEndDate = endOfMonth(monthStartDate);
   var startDate = startOfWeek(monthStartDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var dayLabelFormatter = React.useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
@@ -3277,7 +3277,7 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "customParseDate"];
+var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "weekStartsOn", "customParseDate"];
 var Datepicker = React.forwardRef(function (props, calendarRef) {
   var children = props.children,
       placement = props.placement,
@@ -3293,6 +3293,7 @@ var Datepicker = React.forwardRef(function (props, calendarRef) {
       minValue = props.minValue,
       maxValue = props.maxValue,
       locale = props.locale,
+      weekStartsOn = props.weekStartsOn,
       customParseDate = props.customParseDate,
       menuProps = _objectWithoutProperties(props, _excluded);
   var theme = React.useContext(styled.ThemeContext);
@@ -3423,7 +3424,8 @@ var Datepicker = React.forwardRef(function (props, calendarRef) {
       value: value,
       minValue: minValue,
       maxValue: maxValue,
-      locale: locale
+      locale: locale,
+      weekStartsOn: weekStartsOn
     })));
   })));
 });
@@ -3433,6 +3435,7 @@ Datepicker.propTypes = {
   onChange: PropTypes__default["default"].any,
   formatDate: PropTypes__default["default"].func,
   locale: PropTypes__default["default"].any,
+  weekStartsOn: PropTypes__default["default"].number,
   minValue: PropTypes__default["default"].any,
   maxValue: PropTypes__default["default"].any,
   isCompact: PropTypes__default["default"].bool,
@@ -3891,6 +3894,7 @@ var Month = React.forwardRef(function (_ref, ref) {
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
       locale = _useDatepickerRangeCo.locale,
+      weekStartsOn = _useDatepickerRangeCo.weekStartsOn,
       isCompact = _useDatepickerRangeCo.isCompact,
       minValue = _useDatepickerRangeCo.minValue,
       maxValue = _useDatepickerRangeCo.maxValue,
@@ -3916,14 +3920,14 @@ var Month = React.forwardRef(function (_ref, ref) {
     });
     return formatter.format(date);
   }, [locale]);
-  var weekStartsOn = getStartOfWeek(locale);
+  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   var monthStartDate = startOfMonth(displayDate);
   var monthEndDate = endOfMonth(monthStartDate);
   var startDate = startOfWeek(monthStartDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var dayLabels = eachDayOfInterval({
     start: startDate,
@@ -4117,7 +4121,7 @@ var Calendar = React.forwardRef(function (props, ref) {
   return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.55.0'
+    "data-garden-version": '8.56.0'
   }, props), React__default["default"].createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true
@@ -4131,6 +4135,7 @@ Calendar.displayName = 'DatepickerRange.Calendar';
 var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
   var startValue = props.startValue,
       locale = props.locale,
+      weekStartsOn = props.weekStartsOn,
       formatDate = props.formatDate,
       endValue = props.endValue,
       onChange = props.onChange,
@@ -4180,6 +4185,7 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       dispatch: dispatch,
       isCompact: isCompact,
       locale: locale,
+      weekStartsOn: weekStartsOn,
       minValue: minValue,
       maxValue: maxValue,
       startValue: startValue,
@@ -4189,13 +4195,14 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       endInputRef: endInputRef,
       customParseDate: customParseDate
     };
-  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
+  }, [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
   return React__default["default"].createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);
 };
 DatepickerRangeComponent.propTypes = {
   locale: PropTypes__default["default"].string,
+  weekStartsOn: PropTypes__default["default"].number,
   startValue: PropTypes__default["default"].instanceOf(Date),
   endValue: PropTypes__default["default"].instanceOf(Date),
   minValue: PropTypes__default["default"].instanceOf(Date),

package/dist/index.esm.js

@@ -55,7 +55,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -68,7 +68,6 @@ function _extends$2() {
 
     return target;
   };
-
   return _extends$2.apply(this, arguments);
 }
 
@@ -391,7 +390,7 @@ function getDate(dirtyDate) {
 var COMPONENT_ID$b = 'datepickers.menu';
 var StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.55.0'
+  'data-garden-version': '8.56.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -762,7 +761,7 @@ function getStartOfWeek(locale) {
 
 var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
 
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
@@ -780,7 +779,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 
 var _path;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -835,18 +834,19 @@ var Calendar$1 = forwardRef(function (_ref, ref) {
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
       isCompact = _ref.isCompact,
-      locale = _ref.locale;
+      locale = _ref.locale,
+      weekStartsOn = _ref.weekStartsOn;
   var _useDatepickerContext = useDatepickerContext$1(),
       state = _useDatepickerContext.state,
       dispatch = _useDatepickerContext.dispatch;
-  var weekStartsOn = getStartOfWeek(locale);
+  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   var monthStartDate = startOfMonth(state.previewDate);
   var monthEndDate = endOfMonth(monthStartDate);
   var startDate = startOfWeek(monthStartDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var dayLabelFormatter = useCallback(function (date) {
     var formatter = new Intl.DateTimeFormat(locale, {
@@ -3249,7 +3249,7 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "customParseDate"];
+var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "weekStartsOn", "customParseDate"];
 var Datepicker = forwardRef(function (props, calendarRef) {
   var children = props.children,
       placement = props.placement,
@@ -3265,6 +3265,7 @@ var Datepicker = forwardRef(function (props, calendarRef) {
       minValue = props.minValue,
       maxValue = props.maxValue,
       locale = props.locale,
+      weekStartsOn = props.weekStartsOn,
       customParseDate = props.customParseDate,
       menuProps = _objectWithoutProperties(props, _excluded);
   var theme = useContext(ThemeContext);
@@ -3395,7 +3396,8 @@ var Datepicker = forwardRef(function (props, calendarRef) {
       value: value,
       minValue: minValue,
       maxValue: maxValue,
-      locale: locale
+      locale: locale,
+      weekStartsOn: weekStartsOn
     })));
   })));
 });
@@ -3405,6 +3407,7 @@ Datepicker.propTypes = {
   onChange: PropTypes.any,
   formatDate: PropTypes.func,
   locale: PropTypes.any,
+  weekStartsOn: PropTypes.number,
   minValue: PropTypes.any,
   maxValue: PropTypes.any,
   isCompact: PropTypes.bool,
@@ -3863,6 +3866,7 @@ var Month = forwardRef(function (_ref, ref) {
       state = _useDatepickerRangeCo.state,
       dispatch = _useDatepickerRangeCo.dispatch,
       locale = _useDatepickerRangeCo.locale,
+      weekStartsOn = _useDatepickerRangeCo.weekStartsOn,
       isCompact = _useDatepickerRangeCo.isCompact,
       minValue = _useDatepickerRangeCo.minValue,
       maxValue = _useDatepickerRangeCo.maxValue,
@@ -3888,14 +3892,14 @@ var Month = forwardRef(function (_ref, ref) {
     });
     return formatter.format(date);
   }, [locale]);
-  var weekStartsOn = getStartOfWeek(locale);
+  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   var monthStartDate = startOfMonth(displayDate);
   var monthEndDate = endOfMonth(monthStartDate);
   var startDate = startOfWeek(monthStartDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: weekStartsOn
+    weekStartsOn: preferredWeekStartsOn
   });
   var dayLabels = eachDayOfInterval({
     start: startDate,
@@ -4089,7 +4093,7 @@ var Calendar = forwardRef(function (props, ref) {
   return React__default.createElement(StyledRangeCalendar, _extends$2({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.55.0'
+    "data-garden-version": '8.56.0'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true
@@ -4103,6 +4107,7 @@ Calendar.displayName = 'DatepickerRange.Calendar';
 var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
   var startValue = props.startValue,
       locale = props.locale,
+      weekStartsOn = props.weekStartsOn,
       formatDate = props.formatDate,
       endValue = props.endValue,
       onChange = props.onChange,
@@ -4152,6 +4157,7 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       dispatch: dispatch,
       isCompact: isCompact,
       locale: locale,
+      weekStartsOn: weekStartsOn,
       minValue: minValue,
       maxValue: maxValue,
       startValue: startValue,
@@ -4161,13 +4167,14 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
       endInputRef: endInputRef,
       customParseDate: customParseDate
     };
-  }, [state, dispatch, isCompact, locale, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
+  }, [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
   return React__default.createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);
 };
 DatepickerRangeComponent.propTypes = {
   locale: PropTypes.string,
+  weekStartsOn: PropTypes.number,
   startValue: PropTypes.instanceOf(Date),
   endValue: PropTypes.instanceOf(Date),
   minValue: PropTypes.instanceOf(Date),

package/dist/typings/elements/Datepicker/components/Calendar.d.ts

@@ -5,12 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
+import { DateFnsIndex } from '../../../utils/calendar-utils';
 interface ICalendarProps extends HTMLAttributes<HTMLDivElement> {
     value?: Date;
     minValue?: Date;
     maxValue?: Date;
     isCompact?: boolean;
     locale?: string;
+    weekStartsOn?: DateFnsIndex;
 }
 export declare const Calendar: React.ForwardRefExoticComponent<ICalendarProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/typings/elements/DatepickerRange/DatepickerRange.d.ts

@@ -14,6 +14,7 @@ export declare const DatepickerRange: {
     (props: PropsWithChildren<IDatepickerRangeProps>): JSX.Element;
     propTypes: {
         locale: PropTypes.Requireable<string>;
+        weekStartsOn: PropTypes.Requireable<number>;
         startValue: PropTypes.Requireable<Date>;
         endValue: PropTypes.Requireable<Date>;
         minValue: PropTypes.Requireable<Date>;

package/dist/typings/elements/DatepickerRange/utils/datepicker-range-reducer.d.ts

@@ -63,7 +63,7 @@ export declare const datepickerRangeReducer: ({ startValue, endValue, locale, fo
     endValue?: Date | undefined;
     locale?: string | undefined;
     formatDate?: any;
-    customParseDate?: ((inputValue?: string | undefined) => Date) | undefined;
+    customParseDate?: ((inputValue?: string) => Date) | undefined;
 }) => (state: IDatepickerRangeState, action: DatepickerRangeAction) => IDatepickerRangeState;
 /**
  * Retrieve initial state for the Datepicker reducer

package/dist/typings/elements/DatepickerRange/utils/useDatepickerRangeContext.d.ts

@@ -4,12 +4,14 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+import { DateFnsIndex } from 'packages/datepickers/src/utils/calendar-utils';
 import { MutableRefObject } from 'react';
 import { IDatepickerRangeState, DatepickerRangeAction } from './datepicker-range-reducer';
 export interface IDatepickerRangeContext {
     state: IDatepickerRangeState;
     dispatch: React.Dispatch<DatepickerRangeAction>;
     locale?: string;
+    weekStartsOn?: DateFnsIndex;
     isCompact?: boolean;
     minValue?: Date;
     maxValue?: Date;

package/dist/typings/types/index.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLAttributes } from 'react';
 import { Modifiers } from 'popper.js';
+import { DateFnsIndex } from '../utils/calendar-utils';
 export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
 export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
 export declare type GardenPlacement = typeof PLACEMENT[number];
@@ -33,6 +34,10 @@ export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, '
      * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
      */
     locale?: string;
+    /**
+     * Overrides the locale default start day of week
+     */
+    weekStartsOn?: DateFnsIndex;
     /**
      * Disables dates before this value on the calendar
      */
@@ -77,7 +82,7 @@ export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, '
      */
     zIndex?: number;
 }
-export interface IDatepickerRangeProps extends Pick<IDatepickerProps, 'locale' | 'minValue' | 'maxValue' | 'formatDate' | 'isCompact'> {
+export interface IDatepickerRangeProps extends Pick<IDatepickerProps, 'locale' | 'weekStartsOn' | 'minValue' | 'maxValue' | 'formatDate' | 'isCompact'> {
     /**
      * Sets the start date
      */

package/dist/typings/utils/calendar-utils.d.ts

@@ -11,9 +11,8 @@
  * 6 - Saturday
  */
 /** This type matches definition required by date-fns utilities */
-declare type DateFnsIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+export declare type DateFnsIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 /**
  * Return start day of week based on locale
  */
 export declare function getStartOfWeek(locale?: string): DateFnsIndex;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "8.55.0",
+  "version": "8.56.0",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.55.0",
+    "@zendeskgarden/react-theming": "^8.56.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "ec2cb4f499e02faadf6a4aa6ac94eaadf1d81015"
+  "gitHead": "c0e1cb7669a366ff510cc9613e2b426d48019732"
 }