chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

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

@@ -57,7 +57,7 @@ 'use strict';
 var DatepickerBackBtns = function DatepickerBackBtns(props) {
-  var _props$styleConfigs;
+  var _props$propsConfigs;
 
   var calendars = props.calendars,
       getBackProps = props.getBackProps;
-  var customBtnProps = (_props$styleConfigs = props.styleConfigs) == null ? void 0 : _props$styleConfigs.dateNavBtnProps;
+  var customBtnProps = (_props$propsConfigs = props.propsConfigs) == null ? void 0 : _props$propsConfigs.dateNavBtnProps;
   return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(react.Button, _extends({}, getBackProps({
@@ -71,7 +71,7 @@ calendars: calendars,
 var DatepickerForwardBtns = function DatepickerForwardBtns(props) {
-  var _props$styleConfigs2;
+  var _props$propsConfigs2;
 
   var calendars = props.calendars,
       getForwardProps = props.getForwardProps;
-  var customBtnProps = (_props$styleConfigs2 = props.styleConfigs) == null ? void 0 : _props$styleConfigs2.dateNavBtnProps;
+  var customBtnProps = (_props$propsConfigs2 = props.propsConfigs) == null ? void 0 : _props$propsConfigs2.dateNavBtnProps;
   return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(react.Button, _extends({}, getForwardProps({
@@ -85,5 +85,6 @@ calendars: calendars
 
+var _excluded$2 = ["selectedBg"];
 var DayOfMonth = function DayOfMonth(_ref) {
   var dateObj = _ref.dateObj,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       isInRange = _ref.isInRange,
@@ -97,4 +98,8 @@ renderProps = _ref.renderProps,
   var getDateProps = renderProps.getDateProps;
-  var customBtnProps = styleConfigs == null ? void 0 : styleConfigs.dayOfMonthBtnProps;
-  var bg = selected || isInRange ? (customBtnProps == null ? void 0 : customBtnProps.selectedBg) || 'purple.200' : 'transparent';
+
+  var _ref2 = (propsConfigs == null ? void 0 : propsConfigs.dayOfMonthBtnProps) || {},
+      selectedBg = _ref2.selectedBg,
+      customBtnProps = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+
+  var bg = selected || isInRange ? selectedBg || 'purple.200' : 'transparent';
   bg = !selectable ? (customBtnProps == null ? void 0 : customBtnProps.disabledBg) || 'red.200' : bg;
@@ -135,3 +140,3 @@ var halfGap = 0.125; //default Chakra-gap-space-1 is 0.25rem
       configs = _ref.configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       onMouseEnterHighlight = _ref.onMouseEnterHighlight,
@@ -159,3 +164,3 @@ isInRange = _ref.isInRange;
       getBackProps: getBackProps,
-      styleConfigs: styleConfigs
+      propsConfigs: propsConfigs
     }), React__default["default"].createElement(react.Heading, {
@@ -167,3 +172,3 @@ size: "sm",
       getForwardProps: getForwardProps,
-      styleConfigs: styleConfigs
+      propsConfigs: propsConfigs
     })), React__default["default"].createElement(react.Divider, null), React__default["default"].createElement(react.SimpleGrid, {
@@ -189,3 +194,3 @@ columns: 7,
           dateObj: dateObj,
-          styleConfigs: styleConfigs,
+          propsConfigs: propsConfigs,
           renderProps: renderProps,
@@ -202,3 +207,3 @@ isInRange: isInRange && isInRange(date),
 
-var _excluded$1 = ["configs", "styleConfigs"];
+var _excluded$1 = ["configs", "propsConfigs"];
 var DefaultConfigs$1 = {
@@ -212,3 +217,3 @@ dateFormat: 'yyyy-MM-dd',
       configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -262,3 +267,3 @@
     isLazy: true
-  }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, {
+  }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, _extends({
     id: id,
@@ -276,3 +281,3 @@ autoComplete: "off",
     }
-  })), React__default["default"].createElement(react.PopoverContent, {
+  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React__default["default"].createElement(react.PopoverContent, {
     ref: ref,
@@ -283,11 +288,11 @@ width: "100%"
     configs: configs,
-    styleConfigs: styleConfigs
+    propsConfigs: propsConfigs
   }))));
 };
 
-var _excluded = ["configs", "styleConfigs", "initDate", "id", "name"];
+var _excluded = ["configs", "propsConfigs", "initDate", "id", "name"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
   var configs = _ref.configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       selected = _ref.selected,
@@ -367,3 +372,3 @@ renderProps = _ref.renderProps;
     configs: configs,
-    styleConfigs: styleConfigs,
+    propsConfigs: propsConfigs,
     isInRange: isInRange,
@@ -382,4 +387,4 @@ onMouseEnterHighlight: onMouseEnterHighlight
       configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
-      _ref2$styleConfigs = _ref2.styleConfigs,
-      styleConfigs = _ref2$styleConfigs === void 0 ? {} : _ref2$styleConfigs,
+      _ref2$propsConfigs = _ref2.propsConfigs,
+      propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
       _ref2$initDate = _ref2.initDate,
@@ -461,3 +466,3 @@ initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
     isLazy: true
-  }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, {
+  }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, _extends({
     id: id,
@@ -475,3 +480,3 @@ autoComplete: "off",
     }
-  })), React__default["default"].createElement(react.PopoverContent, {
+  }, propsConfigs.inputProps))), React__default["default"].createElement(react.PopoverContent, {
     ref: ref,
@@ -482,3 +487,3 @@ width: "100%"
     configs: configs,
-    styleConfigs: styleConfigs,
+    propsConfigs: propsConfigs,
     selected: selectedDates
@@ -485,0 +490,0 @@ }))));

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("dayzed"),r=require("date-fns"),a=require("arrow-keys-react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}var d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],f={variant:"ghost",size:"sm"},m=function(n){var r,a=n.calendars,o=n.getBackProps,u=null==(r=n.styleConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),"<<"),l.default.createElement(t.Button,i({},o({calendars:a}),f,u),"<"))},g=function(n){var r,a=n.calendars,o=n.getForwardProps,u=null==(r=n.styleConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a}),f,u),">"),l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),">>"))},p=function(e){var n=e.dateObj,r=e.styleConfigs,a=n.date,o=n.selectable,u=n.today,s=null==r?void 0:r.dayOfMonthBtnProps,d=n.selected||e.isInRange?(null==s?void 0:s.selectedBg)||"purple.200":"transparent";return d=o?d:(null==s?void 0:s.disabledBg)||"red.200",l.default.createElement(t.Button,i({},(0,e.renderProps.getDateProps)({dateObj:n,disabled:!o,onMouseEnter:e.onMouseEnter}),{disabled:!o,size:"sm",variant:"outline",bg:d,_hover:{bg:"purple.400"},_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}},s,{borderColor:u?(null==s?void 0:s.borderColor)||"blue.400":"transparent"}),o?a.getDate():"X")},v=function(e){var n=e.renderProps,r=e.configs,a=e.styleConfigs,o=e.onMouseEnterHighlight,u=e.isInRange,i=n.calendars,s=n.getBackProps,d=n.getForwardProps;return i.length<=0?null:l.default.createElement(t.Stack,{className:"datepicker-calendar",direction:["column","column","row"]},i.map((function(e){return l.default.createElement(t.VStack,{key:""+e.month+e.year,height:"100%",borderWidth:"1px",padding:"5px 10px"},l.default.createElement(t.HStack,null,l.default.createElement(m,{calendars:i,getBackProps:s,styleConfigs:a}),l.default.createElement(t.Heading,{size:"sm",textAlign:"center"},r.monthNames[e.month]," ",e.year),l.default.createElement(g,{calendars:i,getForwardProps:d,styleConfigs:a})),l.default.createElement(t.Divider,null),l.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},r.dayNames.map((function(n){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:""+e.month+e.year+n},n)})),e.weeks.map((function(r,i){return r.map((function(r,s){var d=""+e.month+e.year+i+s;if(!r)return l.default.createElement(t.Box,{key:d});var c=r.date;return l.default.createElement(p,{key:d,dateObj:r,styleConfigs:a,renderProps:n,isInRange:u&&u(c),onMouseEnter:function(){o&&o(c)}})}))}))))})))},y=["configs","styleConfigs"],h={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},E=["configs","styleConfigs","initDate","id","name"],b=function(n){var r=n.configs,a=n.styleConfigs,o=n.selected,s=n.renderProps,d=e.useState(null),c=d[0],f=d[1],m=s.calendars,g=function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(r,a){var o=a+e;r===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))};return u.default.config({left:function(){g(-1)},right:function(){g(1)},up:function(){g(-7)},down:function(){g(7)}}),m.length>0?l.default.createElement(t.Flex,i({},u.default.events,{onMouseLeave:function(){f(null)}}),l.default.createElement(v,{renderProps:s,configs:r,styleConfigs:a,isInRange:function(e){if(!Array.isArray(o)||null==o||!o.length)return!1;var t=o[0];return 2===o.length?t<e&&o[1]>e:c&&(t<e&&c>=e||e<t&&e>=c)},onMouseEnterHighlight:function(e){Array.isArray(o)&&null!=o&&o.length&&f(e)}})):null},C={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?C:o,i=a.styleConfigs,d=void 0===i?{}:i,c=a.initDate,f=void 0===c?new Date:c,m=a.id,g=a.name,p=s(a,E),v=p.selectedDates,y=p.minDate,h=p.maxDate,P=p.onDateChange,D=p.disabled,k=e.useRef(null),B=e.useRef(null),O=e.useState(!1),F=O[0],M=O[1];t.useOutsideClick({ref:k,handler:function(){return M(!1)}});var S=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(v);v.length?1===v.length?(v[0]<t?n.push(t):n.unshift(t),P(n)):2===n.length&&P([t]):(n.push(t),P(n))}},selected:v,monthsToDisplay:2,date:f,minDate:y,maxDate:h}),x=v[0]?""+r.format(v[0],u.dateFormat):"";return x+=v[1]?" - "+r.format(v[1],u.dateFormat):"",l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:F,onClose:function(){return M(!1)},initialFocusRef:B,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:m,autoComplete:"off",isDisabled:D,ref:B,onClick:function(){return M(!F)},name:g,value:x,onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:k,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(b,{renderProps:S,configs:u,styleConfigs:d,selected:v}))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?h:o,i=a.styleConfigs,d=s(a,y),c=d.date,f=d.name,m=d.disabled,g=d.onDateChange,p=d.id,E=e.useRef(null),b=e.useRef(null),C=e.useState(!1),P=C[0],D=C[1];t.useOutsideClick({ref:E,handler:function(){return D(!1)}});var k=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(g(t),void D(!1)):void 0},selected:c});return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:P,onClose:function(){return D(!1)},initialFocusRef:b,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:p,autoComplete:"off",isDisabled:m,ref:b,onClick:function(){return D(!P)},name:f,value:r.format(c,u.dateFormat),onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:E,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(v,{renderProps:k,configs:u,styleConfigs:i}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@chakra-ui/react"),n=require("dayzed"),r=require("date-fns"),a=require("arrow-keys-react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}var d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],f={variant:"ghost",size:"sm"},p=function(n){var r,a=n.calendars,o=n.getBackProps,u=null==(r=n.propsConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),"<<"),l.default.createElement(t.Button,i({},o({calendars:a}),f,u),"<"))},m=function(n){var r,a=n.calendars,o=n.getForwardProps,u=null==(r=n.propsConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a}),f,u),">"),l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),">>"))},g=["selectedBg"],v=function(e){var n=e.dateObj,r=e.propsConfigs,a=e.isInRange,o=e.onMouseEnter,u=n.date,d=n.selected,c=n.selectable,f=n.today,p=e.renderProps.getDateProps,m=(null==r?void 0:r.dayOfMonthBtnProps)||{},v=m.selectedBg,h=s(m,g),y=d||a?v||"purple.200":"transparent";return y=c?y:(null==h?void 0:h.disabledBg)||"red.200",l.default.createElement(t.Button,i({},p({dateObj:n,disabled:!c,onMouseEnter:o}),{disabled:!c,size:"sm",variant:"outline",bg:y,_hover:{bg:"purple.400"},_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}},h,{borderColor:f?(null==h?void 0:h.borderColor)||"blue.400":"transparent"}),c?u.getDate():"X")},h=function(e){var n=e.renderProps,r=e.configs,a=e.propsConfigs,o=e.onMouseEnterHighlight,u=e.isInRange,i=n.calendars,s=n.getBackProps,d=n.getForwardProps;return i.length<=0?null:l.default.createElement(t.Stack,{className:"datepicker-calendar",direction:["column","column","row"]},i.map((function(e){return l.default.createElement(t.VStack,{key:""+e.month+e.year,height:"100%",borderWidth:"1px",padding:"5px 10px"},l.default.createElement(t.HStack,null,l.default.createElement(p,{calendars:i,getBackProps:s,propsConfigs:a}),l.default.createElement(t.Heading,{size:"sm",textAlign:"center"},r.monthNames[e.month]," ",e.year),l.default.createElement(m,{calendars:i,getForwardProps:d,propsConfigs:a})),l.default.createElement(t.Divider,null),l.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},r.dayNames.map((function(n){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:""+e.month+e.year+n},n)})),e.weeks.map((function(r,i){return r.map((function(r,s){var d=""+e.month+e.year+i+s;if(!r)return l.default.createElement(t.Box,{key:d});var c=r.date;return l.default.createElement(v,{key:d,dateObj:r,propsConfigs:a,renderProps:n,isInRange:u&&u(c),onMouseEnter:function(){o&&o(c)}})}))}))))})))},y=["configs","propsConfigs"],E={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},b=["configs","propsConfigs","initDate","id","name"],C=function(n){var r=n.configs,a=n.propsConfigs,o=n.selected,s=n.renderProps,d=e.useState(null),c=d[0],f=d[1],p=s.calendars,m=function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(r,a){var o=a+e;r===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))};return u.default.config({left:function(){m(-1)},right:function(){m(1)},up:function(){m(-7)},down:function(){m(7)}}),p.length>0?l.default.createElement(t.Flex,i({},u.default.events,{onMouseLeave:function(){f(null)}}),l.default.createElement(h,{renderProps:s,configs:r,propsConfigs:a,isInRange:function(e){if(!Array.isArray(o)||null==o||!o.length)return!1;var t=o[0];return 2===o.length?t<e&&o[1]>e:c&&(t<e&&c>=e||e<t&&e>=c)},onMouseEnterHighlight:function(e){Array.isArray(o)&&null!=o&&o.length&&f(e)}})):null},P={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?P:o,d=a.propsConfigs,c=void 0===d?{}:d,f=a.initDate,p=void 0===f?new Date:f,m=a.id,g=a.name,v=s(a,b),h=v.selectedDates,y=v.minDate,E=v.maxDate,D=v.onDateChange,k=v.disabled,B=e.useRef(null),O=e.useRef(null),F=e.useState(!1),M=F[0],S=F[1];t.useOutsideClick({ref:B,handler:function(){return S(!1)}});var x=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(h);h.length?1===h.length?(h[0]<t?n.push(t):n.unshift(t),D(n)):2===n.length&&D([t]):(n.push(t),D(n))}},selected:h,monthsToDisplay:2,date:p,minDate:y,maxDate:E}),w=h[0]?""+r.format(h[0],u.dateFormat):"";return w+=h[1]?" - "+r.format(h[1],u.dateFormat):"",l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:M,onClose:function(){return S(!1)},initialFocusRef:O,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,i({id:m,autoComplete:"off",isDisabled:k,ref:O,onClick:function(){return S(!M)},name:g,value:w,onChange:function(e){return e.target.value}},c.inputProps))),l.default.createElement(t.PopoverContent,{ref:B,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(C,{renderProps:x,configs:u,propsConfigs:c,selected:h}))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?E:o,d=a.propsConfigs,c=s(a,y),f=c.date,p=c.name,m=c.disabled,g=c.onDateChange,v=c.id,b=e.useRef(null),C=e.useRef(null),P=e.useState(!1),D=P[0],k=P[1];t.useOutsideClick({ref:b,handler:function(){return k(!1)}});var B=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(g(t),void k(!1)):void 0},selected:f});return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:D,onClose:function(){return k(!1)},initialFocusRef:C,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,i({id:v,autoComplete:"off",isDisabled:m,ref:C,onClick:function(){return k(!D)},name:p,value:r.format(f,u.dateFormat),onChange:function(e){return e.target.value}},null==d?void 0:d.inputProps))),l.default.createElement(t.PopoverContent,{ref:b,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(h,{renderProps:B,configs:u,propsConfigs:d}))))};
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.production.min.js.map

dist/chakra-dayzed-datepicker.esm.js

@@ -48,7 +48,7 @@ import React, { Fragment, useRef, useState } from 'react';
 var DatepickerBackBtns = function DatepickerBackBtns(props) {
-  var _props$styleConfigs;
+  var _props$propsConfigs;
 
   var calendars = props.calendars,
       getBackProps = props.getBackProps;
-  var customBtnProps = (_props$styleConfigs = props.styleConfigs) == null ? void 0 : _props$styleConfigs.dateNavBtnProps;
+  var customBtnProps = (_props$propsConfigs = props.propsConfigs) == null ? void 0 : _props$propsConfigs.dateNavBtnProps;
   return React.createElement(Fragment, null, React.createElement(Button, _extends({}, getBackProps({
@@ -62,7 +62,7 @@ calendars: calendars,
 var DatepickerForwardBtns = function DatepickerForwardBtns(props) {
-  var _props$styleConfigs2;
+  var _props$propsConfigs2;
 
   var calendars = props.calendars,
       getForwardProps = props.getForwardProps;
-  var customBtnProps = (_props$styleConfigs2 = props.styleConfigs) == null ? void 0 : _props$styleConfigs2.dateNavBtnProps;
+  var customBtnProps = (_props$propsConfigs2 = props.propsConfigs) == null ? void 0 : _props$propsConfigs2.dateNavBtnProps;
   return React.createElement(Fragment, null, React.createElement(Button, _extends({}, getForwardProps({
@@ -76,5 +76,6 @@ calendars: calendars
 
+var _excluded$2 = ["selectedBg"];
 var DayOfMonth = function DayOfMonth(_ref) {
   var dateObj = _ref.dateObj,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       isInRange = _ref.isInRange,
@@ -88,4 +89,8 @@ renderProps = _ref.renderProps,
   var getDateProps = renderProps.getDateProps;
-  var customBtnProps = styleConfigs == null ? void 0 : styleConfigs.dayOfMonthBtnProps;
-  var bg = selected || isInRange ? (customBtnProps == null ? void 0 : customBtnProps.selectedBg) || 'purple.200' : 'transparent';
+
+  var _ref2 = (propsConfigs == null ? void 0 : propsConfigs.dayOfMonthBtnProps) || {},
+      selectedBg = _ref2.selectedBg,
+      customBtnProps = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+
+  var bg = selected || isInRange ? selectedBg || 'purple.200' : 'transparent';
   bg = !selectable ? (customBtnProps == null ? void 0 : customBtnProps.disabledBg) || 'red.200' : bg;
@@ -126,3 +131,3 @@ var halfGap = 0.125; //default Chakra-gap-space-1 is 0.25rem
       configs = _ref.configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       onMouseEnterHighlight = _ref.onMouseEnterHighlight,
@@ -150,3 +155,3 @@ isInRange = _ref.isInRange;
       getBackProps: getBackProps,
-      styleConfigs: styleConfigs
+      propsConfigs: propsConfigs
     }), React.createElement(Heading, {
@@ -158,3 +163,3 @@ size: "sm",
       getForwardProps: getForwardProps,
-      styleConfigs: styleConfigs
+      propsConfigs: propsConfigs
     })), React.createElement(Divider, null), React.createElement(SimpleGrid, {
@@ -180,3 +185,3 @@ columns: 7,
           dateObj: dateObj,
-          styleConfigs: styleConfigs,
+          propsConfigs: propsConfigs,
           renderProps: renderProps,
@@ -193,3 +198,3 @@ isInRange: isInRange && isInRange(date),
 
-var _excluded$1 = ["configs", "styleConfigs"];
+var _excluded$1 = ["configs", "propsConfigs"];
 var DefaultConfigs$1 = {
@@ -203,3 +208,3 @@ dateFormat: 'yyyy-MM-dd',
       configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -253,3 +258,3 @@
     isLazy: true
-  }, React.createElement(PopoverTrigger, null, React.createElement(Input, {
+  }, React.createElement(PopoverTrigger, null, React.createElement(Input, _extends({
     id: id,
@@ -267,3 +272,3 @@ autoComplete: "off",
     }
-  })), React.createElement(PopoverContent, {
+  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React.createElement(PopoverContent, {
     ref: ref,
@@ -274,11 +279,11 @@ width: "100%"
     configs: configs,
-    styleConfigs: styleConfigs
+    propsConfigs: propsConfigs
   }))));
 };
 
-var _excluded = ["configs", "styleConfigs", "initDate", "id", "name"];
+var _excluded = ["configs", "propsConfigs", "initDate", "id", "name"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
   var configs = _ref.configs,
-      styleConfigs = _ref.styleConfigs,
+      propsConfigs = _ref.propsConfigs,
       selected = _ref.selected,
@@ -358,3 +363,3 @@ renderProps = _ref.renderProps;
     configs: configs,
-    styleConfigs: styleConfigs,
+    propsConfigs: propsConfigs,
     isInRange: isInRange,
@@ -373,4 +378,4 @@ onMouseEnterHighlight: onMouseEnterHighlight
       configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
-      _ref2$styleConfigs = _ref2.styleConfigs,
-      styleConfigs = _ref2$styleConfigs === void 0 ? {} : _ref2$styleConfigs,
+      _ref2$propsConfigs = _ref2.propsConfigs,
+      propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
       _ref2$initDate = _ref2.initDate,
@@ -452,3 +457,3 @@ initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
     isLazy: true
-  }, React.createElement(PopoverTrigger, null, React.createElement(Input, {
+  }, React.createElement(PopoverTrigger, null, React.createElement(Input, _extends({
     id: id,
@@ -466,3 +471,3 @@ autoComplete: "off",
     }
-  })), React.createElement(PopoverContent, {
+  }, propsConfigs.inputProps))), React.createElement(PopoverContent, {
     ref: ref,
@@ -473,3 +478,3 @@ width: "100%"
     configs: configs,
-    styleConfigs: styleConfigs,
+    propsConfigs: propsConfigs,
     selected: selectedDates
@@ -476,0 +481,0 @@ }))));

dist/utils/commonTypes.d.ts

 /// <reference types="react" />
 import { ButtonProps } from '@chakra-ui/button';
-import { BackgroundProps } from '@chakra-ui/react';
+import { BackgroundProps, InputProps } from '@chakra-ui/react';
 import { DateObj } from 'dayzed';
 export declare type OnDateSelected = (selectedDate: DateObj, event: React.SyntheticEvent<Element, Event>) => void;
 export interface DatepickerProps {
-    styleConfigs?: StyleConfigs;
+    propsConfigs?: PropsConfigs;
 }
@@ -13,5 +13,6 @@ export interface DayOfMonthBtnStyleProps extends ButtonProps {
 }
-export interface StyleConfigs {
+export interface PropsConfigs {
     dateNavBtnProps?: ButtonProps;
     dayOfMonthBtnProps?: DayOfMonthBtnStyleProps;
+    inputProps?: InputProps;
 }
@@ -18,0 +19,0 @@ export interface DatepickerConfigs {

package.json

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

README.md

@@ -44,8 +44,9 @@ # A Simple Chakra Datepicker based on Dayzed.
 ```
-### StyleConfigs: 
+### propsConfigs: 
 `dateNavBtnProps` and `dayOfMonthBtnProps` extends from `ButtonProps` of Chakra-UI
+This allows you to override the default behavior however your want as long as supported by Chakra-UI.
 
 <br/>Example:
 ```js
-  styleConfigs={{
+  propsConfigs={{
     dateNavBtnProps: {
@@ -61,4 +62,7 @@ colorScheme: "blue",
       }
+    },
+    inputProps: {
+      size: "sm"
     }
   }}
 ```

src/utils/commonTypes.ts

 import { ButtonProps } from '@chakra-ui/button';
-import { BackgroundProps } from '@chakra-ui/react';
+import { BackgroundProps, InputProps } from '@chakra-ui/react';
 import { DateObj } from 'dayzed';
@@ -11,3 +11,3 @@
 export interface DatepickerProps {
-  styleConfigs?: StyleConfigs;
+  propsConfigs?: PropsConfigs;
 }
@@ -20,5 +20,6 @@
 
-export interface StyleConfigs {
+export interface PropsConfigs {
   dateNavBtnProps?: ButtonProps;
   dayOfMonthBtnProps?: DayOfMonthBtnStyleProps;
+  inputProps?: InputProps;
 }
@@ -25,0 +26,0 @@

No alert changes

Improved metrics

Total package byte prevSize

149011

increased by0.98%

Lines of code

1542

increased by0.52%

Number of lines in readme file

66

increased by6.45%

No dependency changes