chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

dist/chakra-dayzed-datepicker.cjs.development.js

@@ -16,4 +16,8 @@ 'use strict';
 
+var Month_Names_Full = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+var Month_Names_Short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var Weekday_Names_Short = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -31,3 +35,2 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
@@ -51,5 +54,2 @@ }
 
-var Month_Names_Short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-var Weekday_Names_Short = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
 // Based on: https://github.com/leon-good-life/arrow-keys-react
@@ -198,4 +198,14 @@ // re-implemented by @hexelon in https://github.com/hexelon/chakra-dayzed-datepicker/commit/4f44e565e3975f613b54304d1fdaeb97dd7dfa15
       getBackProps = renderProps.getBackProps,
-      getForwardProps = renderProps.getForwardProps; // looking for a useRef() approach to replace it
+      getForwardProps = renderProps.getForwardProps;
+  var weekdayNames = React.useMemo(function () {
+    var firstDayOfWeek = configs.firstDayOfWeek;
+    var dayNames = configs.dayNames;
 
+    if (firstDayOfWeek && firstDayOfWeek > 0) {
+      return configs.dayNames.slice(firstDayOfWeek, dayNames.length).concat(dayNames.slice(0, firstDayOfWeek));
+    }
+
+    return dayNames;
+  }, [configs.firstDayOfWeek, configs.dayNames]); // looking for a useRef() approach to replace it
+
   var getKeyOffset = React.useCallback(function (num) {
@@ -260,3 +270,3 @@ var e = document.activeElement;
       textAlign: "center"
-    }, configs.dayNames.map(function (day, dayIdx) {
+    }, weekdayNames.map(function (day, dayIdx) {
       return React__default["default"].createElement(react.Box, {
@@ -293,7 +303,7 @@ fontSize: "sm",
   monthNames: Month_Names_Short,
-  dayNames: Weekday_Names_Short
+  dayNames: Weekday_Names_Short,
+  firstDayOfWeek: 0
 };
 var SingleDatepicker = function SingleDatepicker(_ref) {
-  var _ref$configs = _ref.configs,
-      configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
+  var configs = _ref.configs,
       propsConfigs = _ref.propsConfigs,
@@ -328,2 +338,4 @@ usePortal = _ref.usePortal,
 
+  var calendarConfigs = _extends({}, DefaultConfigs$1, configs);
+
   var onPopoverClose = function onPopoverClose() {
@@ -370,3 +382,3 @@ onClose();
     name: name,
-    value: selectedDate ? dateFns.format(selectedDate, configs.dateFormat) : '',
+    value: selectedDate ? dateFns.format(selectedDate, calendarConfigs.dateFormat) : '',
     onChange: function onChange(e) {
@@ -386,5 +398,6 @@ return e.target.value;
       offset: offset,
-      onOffsetChanged: setOffset
+      onOffsetChanged: setOffset,
+      firstDayOfWeek: calendarConfigs.firstDayOfWeek
     },
-    configs: configs,
+    configs: calendarConfigs,
     propsConfigs: propsConfigs
@@ -449,7 +462,7 @@ }))))));
   monthNames: Month_Names_Short,
-  dayNames: Weekday_Names_Short
+  dayNames: Weekday_Names_Short,
+  firstDayOfWeek: 0
 };
 var RangeDatepicker = function RangeDatepicker(_ref2) {
-  var _ref2$configs = _ref2.configs,
-      configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
+  var configs = _ref2.configs,
       _ref2$propsConfigs = _ref2.propsConfigs,
@@ -483,5 +496,7 @@ propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
       onClose = _useDisclosure.onClose,
-      isOpen = _useDisclosure.isOpen; // dayzed utils
+      isOpen = _useDisclosure.isOpen;
 
+  var calendarConfigs = _extends({}, DefaultConfigs, configs); // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref3) {
@@ -524,4 +539,4 @@ var selectable = _ref3.selectable,
 
-  var intVal = selectedDates[0] ? "" + dateFns.format(selectedDates[0], configs.dateFormat) : '';
-  intVal += selectedDates[1] ? " - " + dateFns.format(selectedDates[1], configs.dateFormat) : '';
+  var intVal = selectedDates[0] ? "" + dateFns.format(selectedDates[0], calendarConfigs.dateFormat) : '';
+  intVal += selectedDates[1] ? " - " + dateFns.format(selectedDates[1], calendarConfigs.dateFormat) : '';
   var PopoverContentWrapper = usePortal ? react.Portal : React__default["default"].Fragment;
@@ -561,5 +576,6 @@ return React__default["default"].createElement(react.Popover, {
       offset: offset,
-      onOffsetChanged: setOffset
+      onOffsetChanged: setOffset,
+      firstDayOfWeek: calendarConfigs.firstDayOfWeek
     },
-    configs: configs,
+    configs: calendarConfigs,
     propsConfigs: propsConfigs,
@@ -570,4 +586,7 @@ selected: selectedDates
 
+exports.Month_Names_Full = Month_Names_Full;
+exports.Month_Names_Short = Month_Names_Short;
 exports.RangeDatepicker = RangeDatepicker;
 exports.SingleDatepicker = SingleDatepicker;
+exports.Weekday_Names_Short = Weekday_Names_Short;
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.development.js.map

dist/chakra-dayzed-datepicker.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@chakra-ui/react"),n=require("date-fns"),a=require("react-focus-lock"),r=require("dayzed");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),s=o(a);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},u.apply(this,arguments)}function i(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t.indexOf(n=o[a])>=0||(r[n]=e[n]);return r}var d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],f=function(){function e(e){this.config=void 0,this.config=e}return e.prototype.getEvents=function(){var e=this;return{onKeyDown:function(t){switch(t.key){case"ArrowDown":e.config.down&&e.config.down();break;case"ArrowLeft":e.config.left&&e.config.left();break;case"ArrowRight":e.config.right&&e.config.right();break;case"ArrowUp":e.config.up&&e.config.up()}}}},e}(),p={variant:"ghost",size:"sm"},m=function(n){var a,r=n.calendars,o=n.getBackProps,s=null==(a=n.propsConfigs)?void 0:a.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,u({},o({calendars:r,offset:12}),p,s),"<<"),l.default.createElement(t.Button,u({},o({calendars:r}),p,s),"<"))},g=function(n){var a,r=n.calendars,o=n.getForwardProps,s=null==(a=n.propsConfigs)?void 0:a.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,u({},o({calendars:r}),p,s),">"),l.default.createElement(t.Button,u({},o({calendars:r,offset:12}),p,s),">>"))},v=function(n){var a=n.dateObj,r=n.propsConfigs,o=n.isInRange,s=n.onMouseEnter,i=a.date,d=a.selected,c=a.selectable,f=a.today,p=n.renderProps.getDateProps,m=(null==r?void 0:r.dayOfMonthBtnProps)||{},g=m.defaultBtnProps,v=m.isInRangeBtnProps,h=m.selectedBtnProps,y=m.todayBtnProps,P=e.useMemo((function(){return{defaultBtnProps:u({size:"sm",variant:"outline",background:"transparent",borderColor:"transparent",_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}},g,{_hover:c?u({bg:"purple.400"},null==g?void 0:g._hover):void 0}),isInRangeBtnProps:u({background:"purple.200"},v),selectedBtnProps:u({background:"purple.200"},h),todayBtnProps:u({borderColor:"blue.400"},y)}}),[g,v,h,y,c]);return l.default.createElement(t.Button,u({},p({dateObj:a,disabled:!c,onMouseEnter:s}),{disabled:!c},P.defaultBtnProps,o&&c&&P.isInRangeBtnProps,d&&c&&P.selectedBtnProps,f&&P.todayBtnProps),i.getDate())},h=function(n){var a=n.configs,o=n.propsConfigs,s=n.onMouseEnterHighlight,i=n.isInRange,d=r.useDayzed(n.dayzedHookProps),c=d.calendars,p=d.getBackProps,h=d.getForwardProps,y=e.useCallback((function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(a,r){var o=r+e;a===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))}),[]),P=new f({left:function(){y(-1)},right:function(){y(1)},up:function(){y(-7)},down:function(){y(7)}});return c.length<=0?null:l.default.createElement(t.Stack,u({className:"datepicker-calendar",direction:["column","column","row"]},P.getEvents()),c.map((function(e,n){return l.default.createElement(t.VStack,{key:n,height:"100%",borderWidth:"1px",padding:"0.5rem 0.75rem"},l.default.createElement(t.HStack,null,l.default.createElement(m,{calendars:c,getBackProps:p,propsConfigs:o}),l.default.createElement(t.Heading,{size:"sm",minWidth:"5rem",textAlign:"center"},a.monthNames[e.month]," ",e.year),l.default.createElement(g,{calendars:c,getForwardProps:h,propsConfigs:o})),l.default.createElement(t.Divider,null),l.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},a.dayNames.map((function(e,n){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:n},e)})),e.weeks.map((function(n,a){return n.map((function(n,r){var u=e.month+"-"+e.year+"-"+a+"-"+r;if(!n)return l.default.createElement(t.Box,{key:u});var c=n.date;return l.default.createElement(v,{key:u,dateObj:n,propsConfigs:o,renderProps:d,isInRange:i&&i(c),onMouseEnter:function(){s&&s(c)}})}))}))))})))},y=["configs","propsConfigs","usePortal","defaultIsOpen"],P={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},E=["configs","propsConfigs","id","name","usePortal","defaultIsOpen"],b=function(n){var a=n.dayzedHookProps,r=n.configs,o=n.propsConfigs,s=n.selected,u=e.useState(null),i=u[0],d=u[1];return l.default.createElement(t.Flex,{onMouseLeave:function(){d(null)}},l.default.createElement(h,{dayzedHookProps:a,configs:r,propsConfigs:o,isInRange:function(e){if(!Array.isArray(s)||null==s||!s.length)return!1;var t=s[0];return 2===s.length?t<e&&s[1]>e:i&&(t<e&&i>=e||e<t&&e>=i)},onMouseEnterHighlight:function(e){Array.isArray(s)&&null!=s&&s.length&&d(e)}}))},C={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var r=a.configs,o=void 0===r?C:r,d=a.propsConfigs,c=void 0===d?{}:d,f=a.id,p=a.name,m=a.usePortal,g=a.defaultIsOpen,v=void 0!==g&&g,h=i(a,E),y=h.selectedDates,P=h.minDate,D=h.maxDate,k=h.onDateChange,O=h.disabled,B=e.useState(y[0]||new Date),w=B[0],S=B[1],M=e.useState(0),F=M[0],I=M[1],x=t.useDisclosure({defaultIsOpen:v}),z=x.onOpen,A=x.onClose,N=x.isOpen,H=y[0]?""+n.format(y[0],o.dateFormat):"";H+=y[1]?" - "+n.format(y[1],o.dateFormat):"";var R=m?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:N,onOpen:z,onClose:function(){A(),S(y[0]||new Date),I(0)},isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,u({onKeyPress:function(e){" "!==e.key||N||(e.preventDefault(),z())},id:f,autoComplete:"off",isDisabled:O,name:p,value:H,onChange:function(e){return e.target.value}},c.inputProps))),l.default.createElement(R,null,l.default.createElement(t.PopoverContent,{width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(s.default,null,l.default.createElement(b,{dayzedHookProps:{onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(y);y.length?1===y.length?(y[0]<t?n.push(t):n.unshift(t),k(n)):2===n.length&&k([t]):(n.push(t),k(n))}},selected:y,monthsToDisplay:2,date:w,minDate:P,maxDate:D,offset:F,onOffsetChanged:I},configs:o,propsConfigs:c,selected:y}))))))},exports.SingleDatepicker=function(a){var r=a.configs,o=void 0===r?P:r,d=a.propsConfigs,c=a.usePortal,f=a.defaultIsOpen,p=void 0!==f&&f,m=i(a,y),g=m.date,v=m.name,E=m.disabled,b=m.onDateChange,C=m.id,D=m.minDate,k=m.maxDate,O=e.useState(g),B=O[0],w=O[1],S=e.useState(0),M=S[0],F=S[1],I=t.useDisclosure({defaultIsOpen:p}),x=I.onOpen,z=I.onClose,A=I.isOpen,N=c?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:A,onOpen:x,onClose:function(){z(),w(g),F(0)},isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,u({onKeyPress:function(e){" "!==e.key||A||(e.preventDefault(),x())},id:C,autoComplete:"off",isDisabled:E,name:v,value:g?n.format(g,o.dateFormat):"",onChange:function(e){return e.target.value}},null==d?void 0:d.inputProps))),l.default.createElement(N,null,l.default.createElement(t.PopoverContent,{width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(s.default,null,l.default.createElement(h,{dayzedHookProps:{showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(b(t),void z()):void 0},selected:g,date:B,minDate:D,maxDate:k,offset:M,onOffsetChanged:F},configs:o,propsConfigs:d}))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@chakra-ui/react"),n=require("date-fns"),a=require("react-focus-lock"),r=require("dayzed");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(e),l=o(a),u=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],i=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},f.apply(this,arguments)}function d(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t.indexOf(n=o[a])>=0||(r[n]=e[n]);return r}var c=function(){function e(e){this.config=void 0,this.config=e}return e.prototype.getEvents=function(){var e=this;return{onKeyDown:function(t){switch(t.key){case"ArrowDown":e.config.down&&e.config.down();break;case"ArrowLeft":e.config.left&&e.config.left();break;case"ArrowRight":e.config.right&&e.config.right();break;case"ArrowUp":e.config.up&&e.config.up()}}}},e}(),p={variant:"ghost",size:"sm"},m=function(n){var a,r=n.calendars,o=n.getBackProps,l=null==(a=n.propsConfigs)?void 0:a.dateNavBtnProps;return s.default.createElement(e.Fragment,null,s.default.createElement(t.Button,f({},o({calendars:r,offset:12}),p,l),"<<"),s.default.createElement(t.Button,f({},o({calendars:r}),p,l),"<"))},g=function(n){var a,r=n.calendars,o=n.getForwardProps,l=null==(a=n.propsConfigs)?void 0:a.dateNavBtnProps;return s.default.createElement(e.Fragment,null,s.default.createElement(t.Button,f({},o({calendars:r}),p,l),">"),s.default.createElement(t.Button,f({},o({calendars:r,offset:12}),p,l),">>"))},v=function(n){var a=n.dateObj,r=n.propsConfigs,o=n.isInRange,l=n.onMouseEnter,u=a.date,i=a.selected,d=a.selectable,c=a.today,p=n.renderProps.getDateProps,m=(null==r?void 0:r.dayOfMonthBtnProps)||{},g=m.defaultBtnProps,v=m.isInRangeBtnProps,y=m.selectedBtnProps,h=m.todayBtnProps,P=e.useMemo((function(){return{defaultBtnProps:f({size:"sm",variant:"outline",background:"transparent",borderColor:"transparent",_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}},g,{_hover:d?f({bg:"purple.400"},null==g?void 0:g._hover):void 0}),isInRangeBtnProps:f({background:"purple.200"},v),selectedBtnProps:f({background:"purple.200"},y),todayBtnProps:f({borderColor:"blue.400"},h)}}),[g,v,y,h,d]);return s.default.createElement(t.Button,f({},p({dateObj:a,disabled:!d,onMouseEnter:l}),{disabled:!d},P.defaultBtnProps,o&&d&&P.isInRangeBtnProps,i&&d&&P.selectedBtnProps,c&&P.todayBtnProps),u.getDate())},y=function(n){var a=n.configs,o=n.propsConfigs,l=n.onMouseEnterHighlight,u=n.isInRange,i=r.useDayzed(n.dayzedHookProps),d=i.calendars,p=i.getBackProps,y=i.getForwardProps,h=e.useMemo((function(){var e=a.firstDayOfWeek,t=a.dayNames;return e&&e>0?a.dayNames.slice(e,t.length).concat(t.slice(0,e)):t}),[a.firstDayOfWeek,a.dayNames]),P=e.useCallback((function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(a,r){var o=r+e;a===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))}),[]),b=new c({left:function(){P(-1)},right:function(){P(1)},up:function(){P(-7)},down:function(){P(7)}});return d.length<=0?null:s.default.createElement(t.Stack,f({className:"datepicker-calendar",direction:["column","column","row"]},b.getEvents()),d.map((function(e,n){return s.default.createElement(t.VStack,{key:n,height:"100%",borderWidth:"1px",padding:"0.5rem 0.75rem"},s.default.createElement(t.HStack,null,s.default.createElement(m,{calendars:d,getBackProps:p,propsConfigs:o}),s.default.createElement(t.Heading,{size:"sm",minWidth:"5rem",textAlign:"center"},a.monthNames[e.month]," ",e.year),s.default.createElement(g,{calendars:d,getForwardProps:y,propsConfigs:o})),s.default.createElement(t.Divider,null),s.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},h.map((function(e,n){return s.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:n},e)})),e.weeks.map((function(n,a){return n.map((function(n,r){var f=e.month+"-"+e.year+"-"+a+"-"+r;if(!n)return s.default.createElement(t.Box,{key:f});var d=n.date;return s.default.createElement(v,{key:f,dateObj:n,propsConfigs:o,renderProps:i,isInRange:u&&u(d),onMouseEnter:function(){l&&l(d)}})}))}))))})))},h=["configs","propsConfigs","usePortal","defaultIsOpen"],P={dateFormat:"yyyy-MM-dd",monthNames:u,dayNames:i,firstDayOfWeek:0},b=["configs","propsConfigs","id","name","usePortal","defaultIsOpen"],E=function(n){var a=n.dayzedHookProps,r=n.configs,o=n.propsConfigs,l=n.selected,u=e.useState(null),i=u[0],f=u[1];return s.default.createElement(t.Flex,{onMouseLeave:function(){f(null)}},s.default.createElement(y,{dayzedHookProps:a,configs:r,propsConfigs:o,isInRange:function(e){if(!Array.isArray(l)||null==l||!l.length)return!1;var t=l[0];return 2===l.length?t<e&&l[1]>e:i&&(t<e&&i>=e||e<t&&e>=i)},onMouseEnterHighlight:function(e){Array.isArray(l)&&null!=l&&l.length&&f(e)}}))},D={dateFormat:"MM/dd/yyyy",monthNames:u,dayNames:i,firstDayOfWeek:0};exports.Month_Names_Full=["January","February","March","April","May","June","July","August","September","October","November","December"],exports.Month_Names_Short=u,exports.RangeDatepicker=function(a){var r=a.configs,o=a.propsConfigs,u=void 0===o?{}:o,i=a.id,c=a.name,p=a.usePortal,m=a.defaultIsOpen,g=void 0!==m&&m,v=d(a,b),y=v.selectedDates,h=v.minDate,P=v.maxDate,k=v.onDateChange,O=v.disabled,C=e.useState(y[0]||new Date),B=C[0],w=C[1],M=e.useState(0),S=M[0],N=M[1],x=t.useDisclosure({defaultIsOpen:g}),F=x.onOpen,A=x.onClose,I=x.isOpen,W=f({},D,r),z=y[0]?""+n.format(y[0],W.dateFormat):"";z+=y[1]?" - "+n.format(y[1],W.dateFormat):"";var _=p?t.Portal:s.default.Fragment;return s.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:I,onOpen:F,onClose:function(){A(),w(y[0]||new Date),N(0)},isLazy:!0},s.default.createElement(t.PopoverTrigger,null,s.default.createElement(t.Input,f({onKeyPress:function(e){" "!==e.key||I||(e.preventDefault(),F())},id:i,autoComplete:"off",isDisabled:O,name:c,value:z,onChange:function(e){return e.target.value}},u.inputProps))),s.default.createElement(_,null,s.default.createElement(t.PopoverContent,{width:"100%"},s.default.createElement(t.PopoverBody,null,s.default.createElement(l.default,null,s.default.createElement(E,{dayzedHookProps:{onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(y);y.length?1===y.length?(y[0]<t?n.push(t):n.unshift(t),k(n)):2===n.length&&k([t]):(n.push(t),k(n))}},selected:y,monthsToDisplay:2,date:B,minDate:h,maxDate:P,offset:S,onOffsetChanged:N,firstDayOfWeek:W.firstDayOfWeek},configs:W,propsConfigs:u,selected:y}))))))},exports.SingleDatepicker=function(a){var r=a.configs,o=a.propsConfigs,u=a.usePortal,i=a.defaultIsOpen,c=void 0!==i&&i,p=d(a,h),m=p.date,g=p.name,v=p.disabled,b=p.onDateChange,E=p.id,D=p.minDate,k=p.maxDate,O=e.useState(m),C=O[0],B=O[1],w=e.useState(0),M=w[0],S=w[1],N=t.useDisclosure({defaultIsOpen:c}),x=N.onOpen,F=N.onClose,A=N.isOpen,I=f({},P,r),W=u?t.Portal:s.default.Fragment;return s.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:A,onOpen:x,onClose:function(){F(),B(m),S(0)},isLazy:!0},s.default.createElement(t.PopoverTrigger,null,s.default.createElement(t.Input,f({onKeyPress:function(e){" "!==e.key||A||(e.preventDefault(),x())},id:E,autoComplete:"off",isDisabled:v,name:g,value:m?n.format(m,I.dateFormat):"",onChange:function(e){return e.target.value}},null==o?void 0:o.inputProps))),s.default.createElement(W,null,s.default.createElement(t.PopoverContent,{width:"100%"},s.default.createElement(t.PopoverBody,null,s.default.createElement(l.default,null,s.default.createElement(y,{dayzedHookProps:{showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(b(t),void F()):void 0},selected:m,date:C,minDate:D,maxDate:k,offset:M,onOffsetChanged:S,firstDayOfWeek:I.firstDayOfWeek},configs:I,propsConfigs:o}))))))},exports.Weekday_Names_Short=i;
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.production.min.js.map

dist/chakra-dayzed-datepicker.esm.js

@@ -7,4 +7,8 @@ import React, { Fragment, useMemo, useCallback, useState } from 'react';
 
+var Month_Names_Full = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+var Month_Names_Short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var Weekday_Names_Short = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -22,3 +26,2 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
@@ -42,5 +45,2 @@ }
 
-var Month_Names_Short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-var Weekday_Names_Short = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
 // Based on: https://github.com/leon-good-life/arrow-keys-react
@@ -189,4 +189,14 @@ // re-implemented by @hexelon in https://github.com/hexelon/chakra-dayzed-datepicker/commit/4f44e565e3975f613b54304d1fdaeb97dd7dfa15
       getBackProps = renderProps.getBackProps,
-      getForwardProps = renderProps.getForwardProps; // looking for a useRef() approach to replace it
+      getForwardProps = renderProps.getForwardProps;
+  var weekdayNames = useMemo(function () {
+    var firstDayOfWeek = configs.firstDayOfWeek;
+    var dayNames = configs.dayNames;
 
+    if (firstDayOfWeek && firstDayOfWeek > 0) {
+      return configs.dayNames.slice(firstDayOfWeek, dayNames.length).concat(dayNames.slice(0, firstDayOfWeek));
+    }
+
+    return dayNames;
+  }, [configs.firstDayOfWeek, configs.dayNames]); // looking for a useRef() approach to replace it
+
   var getKeyOffset = useCallback(function (num) {
@@ -251,3 +261,3 @@ var e = document.activeElement;
       textAlign: "center"
-    }, configs.dayNames.map(function (day, dayIdx) {
+    }, weekdayNames.map(function (day, dayIdx) {
       return React.createElement(Box, {
@@ -284,7 +294,7 @@ fontSize: "sm",
   monthNames: Month_Names_Short,
-  dayNames: Weekday_Names_Short
+  dayNames: Weekday_Names_Short,
+  firstDayOfWeek: 0
 };
 var SingleDatepicker = function SingleDatepicker(_ref) {
-  var _ref$configs = _ref.configs,
-      configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
+  var configs = _ref.configs,
       propsConfigs = _ref.propsConfigs,
@@ -319,2 +329,4 @@ usePortal = _ref.usePortal,
 
+  var calendarConfigs = _extends({}, DefaultConfigs$1, configs);
+
   var onPopoverClose = function onPopoverClose() {
@@ -361,3 +373,3 @@ onClose();
     name: name,
-    value: selectedDate ? format(selectedDate, configs.dateFormat) : '',
+    value: selectedDate ? format(selectedDate, calendarConfigs.dateFormat) : '',
     onChange: function onChange(e) {
@@ -377,5 +389,6 @@ return e.target.value;
       offset: offset,
-      onOffsetChanged: setOffset
+      onOffsetChanged: setOffset,
+      firstDayOfWeek: calendarConfigs.firstDayOfWeek
     },
-    configs: configs,
+    configs: calendarConfigs,
     propsConfigs: propsConfigs
@@ -440,7 +453,7 @@ }))))));
   monthNames: Month_Names_Short,
-  dayNames: Weekday_Names_Short
+  dayNames: Weekday_Names_Short,
+  firstDayOfWeek: 0
 };
 var RangeDatepicker = function RangeDatepicker(_ref2) {
-  var _ref2$configs = _ref2.configs,
-      configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
+  var configs = _ref2.configs,
       _ref2$propsConfigs = _ref2.propsConfigs,
@@ -474,5 +487,7 @@ propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
       onClose = _useDisclosure.onClose,
-      isOpen = _useDisclosure.isOpen; // dayzed utils
+      isOpen = _useDisclosure.isOpen;
 
+  var calendarConfigs = _extends({}, DefaultConfigs, configs); // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref3) {
@@ -515,4 +530,4 @@ var selectable = _ref3.selectable,
 
-  var intVal = selectedDates[0] ? "" + format(selectedDates[0], configs.dateFormat) : '';
-  intVal += selectedDates[1] ? " - " + format(selectedDates[1], configs.dateFormat) : '';
+  var intVal = selectedDates[0] ? "" + format(selectedDates[0], calendarConfigs.dateFormat) : '';
+  intVal += selectedDates[1] ? " - " + format(selectedDates[1], calendarConfigs.dateFormat) : '';
   var PopoverContentWrapper = usePortal ? Portal : React.Fragment;
@@ -552,5 +567,6 @@ return React.createElement(Popover, {
       offset: offset,
-      onOffsetChanged: setOffset
+      onOffsetChanged: setOffset,
+      firstDayOfWeek: calendarConfigs.firstDayOfWeek
     },
-    configs: configs,
+    configs: calendarConfigs,
     propsConfigs: propsConfigs,
@@ -561,3 +577,3 @@ selected: selectedDates
 
-export { RangeDatepicker, SingleDatepicker };
+export { Month_Names_Full, Month_Names_Short, RangeDatepicker, SingleDatepicker, Weekday_Names_Short };
 //# sourceMappingURL=chakra-dayzed-datepicker.esm.js.map

dist/components/calendarPanel.d.ts

 import { Props as DayzedHookProps } from 'dayzed';
 import React from 'react';
-import { DatepickerConfigs, DatepickerProps } from '../utils/commonTypes';
+import { CalendarConfigs, DatepickerProps } from '../utils/commonTypes';
 interface CalendarPanelProps extends DatepickerProps {
-    dayzedHookProps: DayzedHookProps;
-    configs: DatepickerConfigs;
+    dayzedHookProps: Omit<DayzedHookProps, 'children' | 'render'>;
+    configs: CalendarConfigs;
     onMouseEnterHighlight?: (date: Date) => void;
@@ -8,0 +8,0 @@ isInRange?: (date: Date) => boolean | null;

dist/index.d.ts

@@ -0,2 +1,4 @@
+export type { DatepickerConfigs } from './utils/commonTypes';
+export * from './utils/calanderUtils';
 export * from './single';
 export * from './range';

dist/utils/commonTypes.d.ts

@@ -23,5 +23,12 @@ /// <reference types="react" />
 export interface DatepickerConfigs {
+    dateFormat?: string;
+    monthNames?: string[];
+    dayNames?: string[];
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface CalendarConfigs {
     dateFormat: string;
     monthNames: string[];
     dayNames: string[];
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }

package.json

 {
-  "version": "0.2.3",
+  "version": "0.2.4",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -16,2 +16,3 @@ # A Simple Chakra Datepicker based on Dayzed.
 ## Install the dependency
+Npm
 ```
@@ -24,2 +25,10 @@ npm i date-fns dayzed
 
+Yarn:
+```
+yarn add date-fns dayzed
+```
+```
+yarn add chakra-dayzed-datepicker
+```
+
 ## Basic usage
@@ -92,2 +101,14 @@ ### Single
 ```
+
+### propsConfigs: 
+Non Chakra-related configurations :
+```
+  configs={{
+    dateFormat: 'yyyy-MM-dd',
+    dayNames: 'abcdefg'.split(''), // length of 7
+    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
+    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
+  }}
+```
+
 ### other props: 
@@ -94,0 +115,0 @@

src/utils/commonTypes.ts

@@ -30,5 +30,13 @@ import { ButtonProps } from '@chakra-ui/button';
 export interface DatepickerConfigs {
+  dateFormat?: string;
+  monthNames?: string[];
+  dayNames?: string[];
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface CalendarConfigs {
   dateFormat: string;
   monthNames: string[];
   dayNames: string[];
+  firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }

No alert changes

Improved metrics

Total package byte prevSize

195129

increased by10.54%

Lines of code

1887

increased by4.08%

Number of lines in readme file

132

increased by18.92%

No dependency changes