chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.2.9 to 0.2.10

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

@@ -173,2 +173,3 @@ 'use strict';
 var CalendarPanel = function CalendarPanel(_ref) {
+  var _propsConfigs$calenda;
   var dayzedHookProps = _ref.dayzedHookProps,
@@ -227,4 +228,5 @@ configs = _ref.configs,
     direction: ['column', 'column', 'row']
-  }, arrowKeysReact.getEvents()), calendars.map(function (calendar, calendarIdx) {
-    return React__default["default"].createElement(react.VStack, {
+  }, propsConfigs == null ? void 0 : (_propsConfigs$calenda = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda.wrapperProps, arrowKeysReact.getEvents()), calendars.map(function (calendar, calendarIdx) {
+    var _propsConfigs$calenda2, _propsConfigs$calenda3, _propsConfigs$calenda4, _propsConfigs$calenda5;
+    return React__default["default"].createElement(react.VStack, _extends({
       key: calendarIdx,
@@ -234,3 +236,3 @@ height: "100%",
       padding: "0.5rem 0.75rem"
-    }, React__default["default"].createElement(react.HStack, null, React__default["default"].createElement(DatepickerBackBtns, {
+    }, propsConfigs == null ? void 0 : (_propsConfigs$calenda2 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda2.contentProps), React__default["default"].createElement(react.HStack, _extends({}, propsConfigs == null ? void 0 : (_propsConfigs$calenda3 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda3.headerProps), React__default["default"].createElement(DatepickerBackBtns, {
       calendars: calendars,
@@ -247,7 +249,7 @@ getBackProps: getBackProps,
       propsConfigs: propsConfigs
-    })), React__default["default"].createElement(react.Divider, null), React__default["default"].createElement(react.SimpleGrid, {
+    })), React__default["default"].createElement(react.Divider, _extends({}, propsConfigs == null ? void 0 : (_propsConfigs$calenda4 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda4.dividerProps)), React__default["default"].createElement(react.SimpleGrid, _extends({
       columns: 7,
       spacing: 1,
       textAlign: "center"
-    }, weekdayNames.map(function (day, dayIdx) {
+    }, propsConfigs == null ? void 0 : (_propsConfigs$calenda5 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda5.bodyProps), weekdayNames.map(function (day, dayIdx) {
       return React__default["default"].createElement(react.Box, _extends({
@@ -254,0 +256,0 @@ fontSize: "sm",

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

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

dist/chakra-dayzed-datepicker.esm.js

@@ -164,2 +164,3 @@ import { Button, Stack, VStack, HStack, Heading, Divider, SimpleGrid, Box, useDisclosure, Popover, PopoverTrigger, Input, PopoverContent, PopoverBody, Portal, Flex } from '@chakra-ui/react';
 var CalendarPanel = function CalendarPanel(_ref) {
+  var _propsConfigs$calenda;
   var dayzedHookProps = _ref.dayzedHookProps,
@@ -218,4 +219,5 @@ configs = _ref.configs,
     direction: ['column', 'column', 'row']
-  }, arrowKeysReact.getEvents()), calendars.map(function (calendar, calendarIdx) {
-    return React.createElement(VStack, {
+  }, propsConfigs == null ? void 0 : (_propsConfigs$calenda = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda.wrapperProps, arrowKeysReact.getEvents()), calendars.map(function (calendar, calendarIdx) {
+    var _propsConfigs$calenda2, _propsConfigs$calenda3, _propsConfigs$calenda4, _propsConfigs$calenda5;
+    return React.createElement(VStack, _extends({
       key: calendarIdx,
@@ -225,3 +227,3 @@ height: "100%",
       padding: "0.5rem 0.75rem"
-    }, React.createElement(HStack, null, React.createElement(DatepickerBackBtns, {
+    }, propsConfigs == null ? void 0 : (_propsConfigs$calenda2 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda2.contentProps), React.createElement(HStack, _extends({}, propsConfigs == null ? void 0 : (_propsConfigs$calenda3 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda3.headerProps), React.createElement(DatepickerBackBtns, {
       calendars: calendars,
@@ -238,7 +240,7 @@ getBackProps: getBackProps,
       propsConfigs: propsConfigs
-    })), React.createElement(Divider, null), React.createElement(SimpleGrid, {
+    })), React.createElement(Divider, _extends({}, propsConfigs == null ? void 0 : (_propsConfigs$calenda4 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda4.dividerProps)), React.createElement(SimpleGrid, _extends({
       columns: 7,
       spacing: 1,
       textAlign: "center"
-    }, weekdayNames.map(function (day, dayIdx) {
+    }, propsConfigs == null ? void 0 : (_propsConfigs$calenda5 = propsConfigs.calendarPanelProps) == null ? void 0 : _propsConfigs$calenda5.bodyProps), weekdayNames.map(function (day, dayIdx) {
       return React.createElement(Box, _extends({
@@ -245,0 +247,0 @@ fontSize: "sm",

dist/utils/commonTypes.d.ts

 /// <reference types="react" />
 import { ButtonProps } from '@chakra-ui/button';
-import { BoxProps, HeadingProps, InputProps, PopoverBodyProps } from '@chakra-ui/react';
+import { BoxProps, DividerProps, HeadingProps, InputProps, PopoverBodyProps, SimpleGridProps, StackProps } from '@chakra-ui/react';
 import { PopoverContentProps } from '@chakra-ui/react';
@@ -22,2 +22,9 @@ import { DateObj } from 'dayzed';
 }
+export interface CalendarPanelProps {
+    wrapperProps?: StackProps;
+    contentProps?: StackProps;
+    headerProps?: StackProps;
+    bodyProps?: SimpleGridProps;
+    dividerProps?: DividerProps;
+}
 export interface PropsConfigs {
@@ -28,2 +35,3 @@ dateNavBtnProps?: ButtonProps;
     popoverCompProps?: PopoverCompProps;
+    calendarPanelProps?: CalendarPanelProps;
     dateHeadingProps?: HeadingProps;
@@ -30,0 +38,0 @@ weekdayLabelProps?: BoxProps;

package.json

 {
-  "version": "0.2.9",
+  "version": "0.2.10",
   "license": "MIT",
@@ -80,4 +80,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "react-focus-lock": "^2.9.2"
+    "react-focus-lock": "^2.9.5"
   }
 }

README.md

@@ -35,2 +35,5 @@ # A Simple Chakra Datepicker based on Dayzed.
 ```jsx
+
+  import { SingleDatepicker } from "chakra-dayzed-datepicker";
+
   const [date, setDate] = useState(new Date());
@@ -48,2 +51,5 @@
 ```jsx
+
+  import { RangeDatepicker } from "chakra-dayzed-datepicker";
+  
   const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);
@@ -78,2 +84,27 @@
 ```
+To sum them up: 
+```js
+  propsConfigs={{
+    dateNavBtnProps: {},
+    dayOfMonthBtnProps: {
+      defaultBtnProps: {},
+      isInRangeBtnProps: {},
+      selectedBtnProps: {},
+      todayBtnProps: {}
+    },
+    inputProps: {},
+    popoverCompProps: {
+      popoverContentProps: {},
+      popoverBodyProps: {}
+    },
+    calendarPanelProps: {
+      wrapperProps: {},
+      contentProps: {},
+      headerProps: {},
+      dividerProps: {},
+    },
+    weekdayLabelProps: {},
+    dateHeadingProps: {}
+  }}
+```
 
@@ -114,2 +145,22 @@ <br/>Example:
     },
+    calendarPanelProps: {
+      wrapperProps: {
+        borderColor: 'green',
+      },
+      contentProps: {
+        borderWidth: 0,
+      },
+      headerProps: {
+        padding: '5px',
+      },
+      dividerProps: {
+        display: "none",
+      },
+    },
+    weekdayLabelProps: {
+      fontWeight: 'normal'
+    },
+    dateHeadingProps: {
+      fontWeight: 'semibold'
+    }
   }}
@@ -116,0 +167,0 @@ ```

src/utils/commonTypes.ts

 import { ButtonProps } from '@chakra-ui/button';
 import {
   BoxProps,
+  DividerProps,
   HeadingProps,
   InputProps,
   PopoverBodyProps,
+  SimpleGridProps,
+  StackProps,
 } from '@chakra-ui/react';
@@ -34,2 +37,10 @@ import { PopoverContentProps } from '@chakra-ui/react';
 
+export interface CalendarPanelProps {
+  wrapperProps?: StackProps;
+  contentProps?: StackProps;
+  headerProps?: StackProps;
+  bodyProps?: SimpleGridProps;
+  dividerProps?: DividerProps;
+}
+
 export interface PropsConfigs {
@@ -40,2 +51,3 @@ dateNavBtnProps?: ButtonProps;
   popoverCompProps?: PopoverCompProps;
+  calendarPanelProps?: CalendarPanelProps;
   dateHeadingProps?: HeadingProps;
@@ -42,0 +54,0 @@ weekdayLabelProps?: BoxProps;

No alert changes

Improved metrics

Total package byte prevSize

217644

increased by3.56%

Lines of code

2045

increased by1.69%

Number of lines in readme file

199

increased by34.46%

Dependency changes

• Updatedreact-focus-lock@^2.9.5