chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

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

@@ -7,4 +7,5 @@ 'use strict';
 var react = require('@chakra-ui/react');
+var dateFns = require('date-fns');
+var FocusLock = require('react-focus-lock');
 var dayzed = require('dayzed');
-var dateFns = require('date-fns');
 var ArrowKeysReact = require('arrow-keys-react');
@@ -15,2 +16,3 @@
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
 var ArrowKeysReact__default = /*#__PURE__*/_interopDefaultLegacy(ArrowKeysReact);
@@ -112,5 +114,2 @@
         borderColor: 'transparent',
-        _hover: {
-          bg: 'purple.400'
-        },
         // this intends to fill the visual gap from Grid to improve the UX
@@ -128,3 +127,7 @@ // so the button active area is actually larger than what it's seen
         }
-      }, defaultBtnProps),
+      }, defaultBtnProps, {
+        _hover: selectable ? _extends({
+          bg: 'purple.400'
+        }, defaultBtnProps == null ? void 0 : defaultBtnProps._hover) : undefined
+      }),
       isInRangeBtnProps: _extends({
@@ -140,3 +143,3 @@ background: 'purple.200'
     };
-  }, [defaultBtnProps, isInRangeBtnProps, selectedBtnProps, todayBtnProps]);
+  }, [defaultBtnProps, isInRangeBtnProps, selectedBtnProps, todayBtnProps, selectable]);
   return React__default["default"].createElement(react.Button, _extends({}, getDateProps({
@@ -148,7 +151,7 @@ dateObj: dateObj,
     disabled: !selectable
-  }, styleBtnProps.defaultBtnProps, isInRange && selectable && styleBtnProps.isInRangeBtnProps, selected && selectable && styleBtnProps.selectedBtnProps, today && styleBtnProps.todayBtnProps), selectable ? date.getDate() : 'X');
+  }, styleBtnProps.defaultBtnProps, isInRange && selectable && styleBtnProps.isInRangeBtnProps, selected && selectable && styleBtnProps.selectedBtnProps, today && styleBtnProps.todayBtnProps), date.getDate());
 };
 
 var CalendarPanel = function CalendarPanel(_ref) {
-  var renderProps = _ref.renderProps,
+  var dayzedHookProps = _ref.dayzedHookProps,
       configs = _ref.configs,
@@ -158,6 +161,37 @@ propsConfigs = _ref.propsConfigs,
       isInRange = _ref.isInRange;
+  var renderProps = dayzed.useDayzed(dayzedHookProps);
   var calendars = renderProps.calendars,
       getBackProps = renderProps.getBackProps,
-      getForwardProps = renderProps.getForwardProps;
+      getForwardProps = renderProps.getForwardProps; // looking for a useRef() approach to replace it
 
+  var getKeyOffset = React.useCallback(function (num) {
+    var e = document.activeElement;
+    var buttons = document.querySelectorAll('button');
+    buttons.forEach(function (el, i) {
+      var newNodeKey = i + num;
+
+      if (el === e) {
+        if (newNodeKey <= buttons.length - 1 && newNodeKey >= 0) {
+          buttons[newNodeKey].focus();
+        } else {
+          buttons[0].focus();
+        }
+      }
+    });
+  }, []);
+  ArrowKeysReact__default["default"].config({
+    left: function left() {
+      getKeyOffset(-1);
+    },
+    right: function right() {
+      getKeyOffset(1);
+    },
+    up: function up() {
+      getKeyOffset(-7);
+    },
+    down: function down() {
+      getKeyOffset(7);
+    }
+  });
+
   if (calendars.length <= 0) {
@@ -167,11 +201,11 @@ return null;
 
-  return React__default["default"].createElement(react.Stack, {
+  return React__default["default"].createElement(react.Stack, _extends({
     className: "datepicker-calendar",
     direction: ['column', 'column', 'row']
-  }, calendars.map(function (calendar) {
+  }, ArrowKeysReact__default["default"].events), calendars.map(function (calendar, calendarIdx) {
     return React__default["default"].createElement(react.VStack, {
-      key: "" + calendar.month + calendar.year,
+      key: calendarIdx,
       height: "100%",
       borderWidth: "1px",
-      padding: "5px 10px"
+      padding: "0.5rem 0.75rem"
     }, React__default["default"].createElement(react.HStack, null, React__default["default"].createElement(DatepickerBackBtns, {
@@ -183,2 +217,3 @@ calendars: calendars,
       size: "sm",
+      minWidth: '5rem',
       textAlign: "center"
@@ -193,7 +228,7 @@ }, configs.monthNames[calendar.month], " ", calendar.year), React__default["default"].createElement(DatepickerForwardBtns, {
       textAlign: "center"
-    }, configs.dayNames.map(function (day, index) {
+    }, configs.dayNames.map(function (day, dayIdx) {
       return React__default["default"].createElement(react.Box, {
         fontSize: "sm",
         fontWeight: "semibold",
-        key: calendar.month + "-" + calendar.year + "-" + day + "-" + index
+        key: dayIdx
       }, day);
@@ -237,22 +272,35 @@ }), calendar.weeks.map(function (week, weekIdx) {
 
-  var date = props.date,
+  var selectedDate = props.date,
       name = props.name,
       disabled = props.disabled,
       onDateChange = props.onDateChange,
-      id = props.id; // chakra popover utils
+      id = props.id,
+      minDate = props.minDate,
+      maxDate = props.maxDate;
 
-  var ref = React.useRef(null);
-  var initialFocusRef = React.useRef(null);
+  var _useState = React.useState(selectedDate),
+      dateInView = _useState[0],
+      setDateInView = _useState[1];
 
-  var _useState = React.useState(defaultIsOpen),
-      popoverOpen = _useState[0],
-      setPopoverOpen = _useState[1];
+  var _useState2 = React.useState(0),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
 
-  react.useOutsideClick({
-    ref: ref,
-    handler: function handler() {
-      return setPopoverOpen(false);
+  var _useDisclosure = react.useDisclosure({
+    defaultIsOpen: defaultIsOpen
+  }),
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose,
+      isOpen = _useDisclosure.isOpen;
+
+  var onPopoverClose = function onPopoverClose() {
+    onClose();
+
+    {
+      setDateInView(selectedDate);
+      setOffset(0);
     }
-  }); // dayzed utils
+  }; // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref2) {
@@ -265,3 +313,3 @@ var selectable = _ref2.selectable,
       onDateChange(date);
-      setPopoverOpen(false);
+      onClose();
       return;
@@ -271,7 +319,2 @@ }
 
-  var dayzedData = dayzed.useDayzed({
-    showOutsideDays: true,
-    onDateSelected: handleOnDateSelected,
-    selected: date
-  });
   var PopoverContentWrapper = usePortal ? react.Portal : React__default["default"].Fragment;
@@ -281,18 +324,18 @@ return React__default["default"].createElement(react.Popover, {
     variant: "responsive",
-    isOpen: popoverOpen,
-    onClose: function onClose() {
-      return setPopoverOpen(false);
-    },
-    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onClose: onPopoverClose,
     isLazy: true
   }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, _extends({
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === ' ' && !isOpen) {
+        e.preventDefault();
+        onOpen();
+      }
+    },
     id: id,
     autoComplete: "off",
     isDisabled: disabled,
-    ref: initialFocusRef,
-    onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
-    },
     name: name,
-    value: date ? dateFns.format(date, configs.dateFormat) : '',
+    value: selectedDate ? dateFns.format(selectedDate, configs.dateFormat) : '',
     onChange: function onChange(e) {
@@ -302,56 +345,32 @@ return e.target.value;
   }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React__default["default"].createElement(PopoverContentWrapper, null, React__default["default"].createElement(react.PopoverContent, {
-    ref: ref,
     width: "100%"
-  }, React__default["default"].createElement(react.PopoverBody, null, React__default["default"].createElement(CalendarPanel, {
-    renderProps: dayzedData,
+  }, React__default["default"].createElement(react.PopoverBody, null, React__default["default"].createElement(FocusLock__default["default"], null, React__default["default"].createElement(CalendarPanel, {
+    dayzedHookProps: {
+      showOutsideDays: true,
+      onDateSelected: handleOnDateSelected,
+      selected: selectedDate,
+      date: dateInView,
+      minDate: minDate,
+      maxDate: maxDate,
+      offset: offset,
+      onOffsetChanged: setOffset
+    },
     configs: configs,
     propsConfigs: propsConfigs
-  })))));
+  }))))));
 };
 
-var _excluded = ["configs", "propsConfigs", "initDate", "id", "name", "usePortal", "defaultIsOpen"];
+var _excluded = ["configs", "propsConfigs", "id", "name", "usePortal", "defaultIsOpen"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
-  var configs = _ref.configs,
+  var dayzedHookProps = _ref.dayzedHookProps,
+      configs = _ref.configs,
       propsConfigs = _ref.propsConfigs,
-      selected = _ref.selected,
-      renderProps = _ref.renderProps;
+      selected = _ref.selected;
 
   var _useState = React.useState(null),
       hoveredDate = _useState[0],
-      setHoveredDate = _useState[1];
+      setHoveredDate = _useState[1]; // Calendar level
 
-  var calendars = renderProps.calendars; // looking for a useRef() approach to replace it
 
-  var getKeyOffset = function getKeyOffset(num) {
-    var e = document.activeElement;
-    var buttons = document.querySelectorAll('button');
-    buttons.forEach(function (el, i) {
-      var newNodeKey = i + num;
-
-      if (el === e) {
-        if (newNodeKey <= buttons.length - 1 && newNodeKey >= 0) {
-          buttons[newNodeKey].focus();
-        } else {
-          buttons[0].focus();
-        }
-      }
-    });
-  };
-
-  ArrowKeysReact__default["default"].config({
-    left: function left() {
-      getKeyOffset(-1);
-    },
-    right: function right() {
-      getKeyOffset(1);
-    },
-    up: function up() {
-      getKeyOffset(-7);
-    },
-    down: function down() {
-      getKeyOffset(7);
-    }
-  }); // Calendar level
-
   var onMouseLeave = function onMouseLeave() {
@@ -385,7 +404,6 @@ setHoveredDate(null);
 
-  if (!(calendars.length > 0)) return null;
-  return React__default["default"].createElement(react.Flex, _extends({}, ArrowKeysReact__default["default"].events, {
+  return React__default["default"].createElement(react.Flex, {
     onMouseLeave: onMouseLeave
-  }), React__default["default"].createElement(CalendarPanel, {
-    renderProps: renderProps,
+  }, React__default["default"].createElement(CalendarPanel, {
+    dayzedHookProps: dayzedHookProps,
     configs: configs,
@@ -408,4 +426,2 @@ propsConfigs: propsConfigs,
       propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
-      _ref2$initDate = _ref2.initDate,
-      initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
       id = _ref2.id,
@@ -424,16 +440,18 @@ name = _ref2.name,
 
-  var ref = React.useRef(null);
-  var initialFocusRef = React.useRef(null);
+  var _useState2 = React.useState(selectedDates[0] || new Date()),
+      dateInView = _useState2[0],
+      setDateInView = _useState2[1];
 
-  var _useState2 = React.useState(defaultIsOpen),
-      popoverOpen = _useState2[0],
-      setPopoverOpen = _useState2[1];
+  var _useState3 = React.useState(0),
+      offset = _useState3[0],
+      setOffset = _useState3[1];
 
-  react.useOutsideClick({
-    ref: ref,
-    handler: function handler() {
-      return setPopoverOpen(false);
-    }
-  }); // dayzed utils
+  var _useDisclosure = react.useDisclosure({
+    defaultIsOpen: defaultIsOpen
+  }),
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose,
+      isOpen = _useDisclosure.isOpen; // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref3) {
@@ -469,11 +487,9 @@ var selectable = _ref3.selectable,
 
-  var dayzedData = dayzed.useDayzed({
-    onDateSelected: handleOnDateSelected,
-    selected: selectedDates,
-    monthsToDisplay: 2,
-    date: initDate,
-    minDate: minDate,
-    maxDate: maxDate
-  }); // eventually we want to allow user to freely type their own input and parse the input
+  var onPopoverClose = function onPopoverClose() {
+    onClose();
+    setDateInView(selectedDates[0] || new Date());
+    setOffset(0);
+  }; // eventually we want to allow user to freely type their own input and parse the input
 
+
   var intVal = selectedDates[0] ? "" + dateFns.format(selectedDates[0], configs.dateFormat) : '';
@@ -485,7 +501,5 @@ intVal += selectedDates[1] ? " - " + dateFns.format(selectedDates[1], configs.dateFormat) : '';
     variant: "responsive",
-    isOpen: popoverOpen,
-    onClose: function onClose() {
-      return setPopoverOpen(false);
-    },
-    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onClose: onPopoverClose,
     isLazy: true
@@ -496,6 +510,2 @@ }, React__default["default"].createElement(react.PopoverTrigger, null, React__default["default"].createElement(react.Input, _extends({
     isDisabled: disabled,
-    ref: initialFocusRef,
-    onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
-    },
     name: name,
@@ -507,10 +517,18 @@ value: intVal,
   }, propsConfigs.inputProps))), React__default["default"].createElement(PopoverContentWrapper, null, React__default["default"].createElement(react.PopoverContent, {
-    ref: ref,
     width: "100%"
-  }, React__default["default"].createElement(react.PopoverBody, null, React__default["default"].createElement(RangeCalendarPanel, {
-    renderProps: dayzedData,
+  }, React__default["default"].createElement(react.PopoverBody, null, React__default["default"].createElement(FocusLock__default["default"], null, React__default["default"].createElement(RangeCalendarPanel, {
+    dayzedHookProps: {
+      onDateSelected: handleOnDateSelected,
+      selected: selectedDates,
+      monthsToDisplay: 2,
+      date: dateInView,
+      minDate: minDate,
+      maxDate: maxDate,
+      offset: offset,
+      onOffsetChanged: setOffset
+    },
     configs: configs,
     propsConfigs: propsConfigs,
     selected: selectedDates
-  })))));
+  }))))));
 };
@@ -517,0 +535,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 s(){return s=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},s.apply(this,arguments)}function i(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,s({},o({calendars:a,offset:12}),f,u),"<<"),l.default.createElement(t.Button,s({},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,s({},o({calendars:a}),f,u),">"),l.default.createElement(t.Button,s({},o({calendars:a,offset:12}),f,u),">>"))},g=function(n){var r=n.dateObj,a=n.propsConfigs,o=n.isInRange,u=n.onMouseEnter,i=r.date,d=r.selected,c=r.selectable,f=r.today,p=n.renderProps.getDateProps,m=(null==a?void 0:a.dayOfMonthBtnProps)||{},g=m.defaultBtnProps,v=m.isInRangeBtnProps,h=m.selectedBtnProps,P=m.todayBtnProps,y=e.useMemo((function(){return{defaultBtnProps:s({size:"sm",variant:"outline",background:"transparent",borderColor:"transparent",_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"}},g),isInRangeBtnProps:s({background:"purple.200"},v),selectedBtnProps:s({background:"purple.200"},h),todayBtnProps:s({borderColor:"blue.400"},P)}}),[g,v,h,P]);return l.default.createElement(t.Button,s({},p({dateObj:r,disabled:!c,onMouseEnter:u}),{disabled:!c},y.defaultBtnProps,o&&c&&y.isInRangeBtnProps,d&&c&&y.selectedBtnProps,f&&y.todayBtnProps),c?i.getDate():"X")},v=function(e){var n=e.renderProps,r=e.configs,a=e.propsConfigs,o=e.onMouseEnterHighlight,u=e.isInRange,s=n.calendars,i=n.getBackProps,d=n.getForwardProps;return s.length<=0?null:l.default.createElement(t.Stack,{className:"datepicker-calendar",direction:["column","column","row"]},s.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:s,getBackProps:i,propsConfigs:a}),l.default.createElement(t.Heading,{size:"sm",textAlign:"center"},r.monthNames[e.month]," ",e.year),l.default.createElement(m,{calendars:s,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,r){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:e.month+"-"+e.year+"-"+n+"-"+r},n)})),e.weeks.map((function(r,s){return r.map((function(r,i){var d=e.month+"-"+e.year+"-"+s+"-"+i;if(!r)return l.default.createElement(t.Box,{key:d});var c=r.date;return l.default.createElement(g,{key:d,dateObj:r,propsConfigs:a,renderProps:n,isInRange:u&&u(c),onMouseEnter:function(){o&&o(c)}})}))}))))})))},h=["configs","propsConfigs","usePortal","defaultIsOpen"],P={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},y=["configs","propsConfigs","initDate","id","name","usePortal","defaultIsOpen"],E=function(n){var r=n.configs,a=n.propsConfigs,o=n.selected,i=n.renderProps,d=e.useState(null),c=d[0],f=d[1],p=i.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,s({},u.default.events,{onMouseLeave:function(){f(null)}}),l.default.createElement(v,{renderProps:i,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},b={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?b: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=a.usePortal,h=a.defaultIsOpen,P=void 0!==h&&h,C=i(a,y),B=C.selectedDates,D=C.minDate,k=C.maxDate,O=C.onDateChange,F=C.disabled,M=e.useRef(null),S=e.useRef(null),x=e.useState(P),R=x[0],I=x[1];t.useOutsideClick({ref:M,handler:function(){return I(!1)}});var w=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(B);B.length?1===B.length?(B[0]<t?n.push(t):n.unshift(t),O(n)):2===n.length&&O([t]):(n.push(t),O(n))}},selected:B,monthsToDisplay:2,date:p,minDate:D,maxDate:k}),N=B[0]?""+r.format(B[0],u.dateFormat):"";N+=B[1]?" - "+r.format(B[1],u.dateFormat):"";var z=v?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:R,onClose:function(){return I(!1)},initialFocusRef:S,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,s({id:m,autoComplete:"off",isDisabled:F,ref:S,onClick:function(){return I(!R)},name:g,value:N,onChange:function(e){return e.target.value}},c.inputProps))),l.default.createElement(z,null,l.default.createElement(t.PopoverContent,{ref:M,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(E,{renderProps:w,configs:u,propsConfigs:c,selected:B})))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?P:o,d=a.propsConfigs,c=a.usePortal,f=a.defaultIsOpen,p=void 0!==f&&f,m=i(a,h),g=m.date,y=m.name,E=m.disabled,b=m.onDateChange,C=m.id,B=e.useRef(null),D=e.useRef(null),k=e.useState(p),O=k[0],F=k[1];t.useOutsideClick({ref:B,handler:function(){return F(!1)}});var M=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(b(t),void F(!1)):void 0},selected:g}),S=c?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:O,onClose:function(){return F(!1)},initialFocusRef:D,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,s({id:C,autoComplete:"off",isDisabled:E,ref:D,onClick:function(){return F(!O)},name:y,value:g?r.format(g,u.dateFormat):"",onChange:function(e){return e.target.value}},null==d?void 0:d.inputProps))),l.default.createElement(S,null,l.default.createElement(t.PopoverContent,{ref:B,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(v,{renderProps:M,configs:u,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"),o=require("arrow-keys-react");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(e),u=l(a),d=l(o);function i(){return i=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},i.apply(this,arguments)}function c(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 f=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],p=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m={variant:"ghost",size:"sm"},g=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,i({},o({calendars:r,offset:12}),m,l),"<<"),s.default.createElement(t.Button,i({},o({calendars:r}),m,l),"<"))},v=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,i({},o({calendars:r}),m,l),">"),s.default.createElement(t.Button,i({},o({calendars:r,offset:12}),m,l),">>"))},y=function(n){var a=n.dateObj,r=n.propsConfigs,o=n.isInRange,l=n.onMouseEnter,u=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,y=m.selectedBtnProps,h=m.todayBtnProps,P=e.useMemo((function(){return{defaultBtnProps:i({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?i({bg:"purple.400"},null==g?void 0:g._hover):void 0}),isInRangeBtnProps:i({background:"purple.200"},v),selectedBtnProps:i({background:"purple.200"},y),todayBtnProps:i({borderColor:"blue.400"},h)}}),[g,v,y,h,c]);return s.default.createElement(t.Button,i({},p({dateObj:a,disabled:!c,onMouseEnter:l}),{disabled:!c},P.defaultBtnProps,o&&c&&P.isInRangeBtnProps,d&&c&&P.selectedBtnProps,f&&P.todayBtnProps),u.getDate())},h=function(n){var a=n.configs,o=n.propsConfigs,l=n.onMouseEnterHighlight,u=n.isInRange,c=r.useDayzed(n.dayzedHookProps),f=c.calendars,p=c.getBackProps,m=c.getForwardProps,h=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())}))}),[]);return d.default.config({left:function(){h(-1)},right:function(){h(1)},up:function(){h(-7)},down:function(){h(7)}}),f.length<=0?null:s.default.createElement(t.Stack,i({className:"datepicker-calendar",direction:["column","column","row"]},d.default.events),f.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(g,{calendars:f,getBackProps:p,propsConfigs:o}),s.default.createElement(t.Heading,{size:"sm",minWidth:"5rem",textAlign:"center"},a.monthNames[e.month]," ",e.year),s.default.createElement(v,{calendars:f,getForwardProps:m,propsConfigs:o})),s.default.createElement(t.Divider,null),s.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},a.dayNames.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 d=e.month+"-"+e.year+"-"+a+"-"+r;if(!n)return s.default.createElement(t.Box,{key:d});var i=n.date;return s.default.createElement(y,{key:d,dateObj:n,propsConfigs:o,renderProps:c,isInRange:u&&u(i),onMouseEnter:function(){l&&l(i)}})}))}))))})))},P=["configs","propsConfigs","usePortal","defaultIsOpen"],E={dateFormat:"yyyy-MM-dd",monthNames:f,dayNames:p},b=["configs","propsConfigs","id","name","usePortal","defaultIsOpen"],C=function(n){var a=n.dayzedHookProps,r=n.configs,o=n.propsConfigs,l=n.selected,u=e.useState(null),d=u[0],i=u[1];return s.default.createElement(t.Flex,{onMouseLeave:function(){i(null)}},s.default.createElement(h,{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:d&&(t<e&&d>=e||e<t&&e>=d)},onMouseEnterHighlight:function(e){Array.isArray(l)&&null!=l&&l.length&&i(e)}}))},D={dateFormat:"MM/dd/yyyy",monthNames:f,dayNames:p};exports.RangeDatepicker=function(a){var r=a.configs,o=void 0===r?D:r,l=a.propsConfigs,d=void 0===l?{}:l,f=a.id,p=a.name,m=a.usePortal,g=a.defaultIsOpen,v=void 0!==g&&g,y=c(a,b),h=y.selectedDates,P=y.minDate,E=y.maxDate,k=y.onDateChange,O=y.disabled,B=e.useState(h[0]||new Date),S=B[0],M=B[1],F=e.useState(0),I=F[0],x=F[1],w=t.useDisclosure({defaultIsOpen:v}),z=w.onOpen,N=w.onClose,A=w.isOpen,H=h[0]?""+n.format(h[0],o.dateFormat):"";H+=h[1]?" - "+n.format(h[1],o.dateFormat):"";var j=m?t.Portal:s.default.Fragment;return s.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:A,onOpen:z,onClose:function(){N(),M(h[0]||new Date),x(0)},isLazy:!0},s.default.createElement(t.PopoverTrigger,null,s.default.createElement(t.Input,i({id:f,autoComplete:"off",isDisabled:O,name:p,value:H,onChange:function(e){return e.target.value}},d.inputProps))),s.default.createElement(j,null,s.default.createElement(t.PopoverContent,{width:"100%"},s.default.createElement(t.PopoverBody,null,s.default.createElement(u.default,null,s.default.createElement(C,{dayzedHookProps:{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),k(n)):2===n.length&&k([t]):(n.push(t),k(n))}},selected:h,monthsToDisplay:2,date:S,minDate:P,maxDate:E,offset:I,onOffsetChanged:x},configs:o,propsConfigs:d,selected:h}))))))},exports.SingleDatepicker=function(a){var r=a.configs,o=void 0===r?E:r,l=a.propsConfigs,d=a.usePortal,f=a.defaultIsOpen,p=void 0!==f&&f,m=c(a,P),g=m.date,v=m.name,y=m.disabled,b=m.onDateChange,C=m.id,D=m.minDate,k=m.maxDate,O=e.useState(g),B=O[0],S=O[1],M=e.useState(0),F=M[0],I=M[1],x=t.useDisclosure({defaultIsOpen:p}),w=x.onOpen,z=x.onClose,N=x.isOpen,A=d?t.Portal:s.default.Fragment;return s.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:N,onOpen:w,onClose:function(){z(),S(g),I(0)},isLazy:!0},s.default.createElement(t.PopoverTrigger,null,s.default.createElement(t.Input,i({onKeyPress:function(e){" "!==e.key||N||(e.preventDefault(),w())},id:C,autoComplete:"off",isDisabled:y,name:v,value:g?n.format(g,o.dateFormat):"",onChange:function(e){return e.target.value}},null==l?void 0:l.inputProps))),s.default.createElement(A,null,s.default.createElement(t.PopoverContent,{width:"100%"},s.default.createElement(t.PopoverBody,null,s.default.createElement(u.default,null,s.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:F,onOffsetChanged:I},configs:o,propsConfigs:l}))))))};
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.production.min.js.map

dist/chakra-dayzed-datepicker.esm.js

@@ -1,5 +0,6 @@
-import React, { Fragment, useMemo, useRef, useState } from 'react';
-import { Button, Stack, VStack, HStack, Heading, Divider, SimpleGrid, Box, useOutsideClick, Popover, PopoverTrigger, Input, PopoverContent, PopoverBody, Portal, Flex } from '@chakra-ui/react';
+import React, { Fragment, useMemo, useCallback, useState } from 'react';
+import { Button, Stack, VStack, HStack, Heading, Divider, SimpleGrid, Box, useDisclosure, Popover, PopoverTrigger, Input, PopoverContent, PopoverBody, Portal, Flex } from '@chakra-ui/react';
+import { format } from 'date-fns';
+import FocusLock from 'react-focus-lock';
 import { useDayzed } from 'dayzed';
-import { format } from 'date-fns';
 import ArrowKeysReact from 'arrow-keys-react';
@@ -101,5 +102,2 @@
         borderColor: 'transparent',
-        _hover: {
-          bg: 'purple.400'
-        },
         // this intends to fill the visual gap from Grid to improve the UX
@@ -117,3 +115,7 @@ // so the button active area is actually larger than what it's seen
         }
-      }, defaultBtnProps),
+      }, defaultBtnProps, {
+        _hover: selectable ? _extends({
+          bg: 'purple.400'
+        }, defaultBtnProps == null ? void 0 : defaultBtnProps._hover) : undefined
+      }),
       isInRangeBtnProps: _extends({
@@ -129,3 +131,3 @@ background: 'purple.200'
     };
-  }, [defaultBtnProps, isInRangeBtnProps, selectedBtnProps, todayBtnProps]);
+  }, [defaultBtnProps, isInRangeBtnProps, selectedBtnProps, todayBtnProps, selectable]);
   return React.createElement(Button, _extends({}, getDateProps({
@@ -137,7 +139,7 @@ dateObj: dateObj,
     disabled: !selectable
-  }, styleBtnProps.defaultBtnProps, isInRange && selectable && styleBtnProps.isInRangeBtnProps, selected && selectable && styleBtnProps.selectedBtnProps, today && styleBtnProps.todayBtnProps), selectable ? date.getDate() : 'X');
+  }, styleBtnProps.defaultBtnProps, isInRange && selectable && styleBtnProps.isInRangeBtnProps, selected && selectable && styleBtnProps.selectedBtnProps, today && styleBtnProps.todayBtnProps), date.getDate());
 };
 
 var CalendarPanel = function CalendarPanel(_ref) {
-  var renderProps = _ref.renderProps,
+  var dayzedHookProps = _ref.dayzedHookProps,
       configs = _ref.configs,
@@ -147,6 +149,37 @@ propsConfigs = _ref.propsConfigs,
       isInRange = _ref.isInRange;
+  var renderProps = useDayzed(dayzedHookProps);
   var calendars = renderProps.calendars,
       getBackProps = renderProps.getBackProps,
-      getForwardProps = renderProps.getForwardProps;
+      getForwardProps = renderProps.getForwardProps; // looking for a useRef() approach to replace it
 
+  var getKeyOffset = useCallback(function (num) {
+    var e = document.activeElement;
+    var buttons = document.querySelectorAll('button');
+    buttons.forEach(function (el, i) {
+      var newNodeKey = i + num;
+
+      if (el === e) {
+        if (newNodeKey <= buttons.length - 1 && newNodeKey >= 0) {
+          buttons[newNodeKey].focus();
+        } else {
+          buttons[0].focus();
+        }
+      }
+    });
+  }, []);
+  ArrowKeysReact.config({
+    left: function left() {
+      getKeyOffset(-1);
+    },
+    right: function right() {
+      getKeyOffset(1);
+    },
+    up: function up() {
+      getKeyOffset(-7);
+    },
+    down: function down() {
+      getKeyOffset(7);
+    }
+  });
+
   if (calendars.length <= 0) {
@@ -156,11 +189,11 @@ return null;
 
-  return React.createElement(Stack, {
+  return React.createElement(Stack, _extends({
     className: "datepicker-calendar",
     direction: ['column', 'column', 'row']
-  }, calendars.map(function (calendar) {
+  }, ArrowKeysReact.events), calendars.map(function (calendar, calendarIdx) {
     return React.createElement(VStack, {
-      key: "" + calendar.month + calendar.year,
+      key: calendarIdx,
       height: "100%",
       borderWidth: "1px",
-      padding: "5px 10px"
+      padding: "0.5rem 0.75rem"
     }, React.createElement(HStack, null, React.createElement(DatepickerBackBtns, {
@@ -172,2 +205,3 @@ calendars: calendars,
       size: "sm",
+      minWidth: '5rem',
       textAlign: "center"
@@ -182,7 +216,7 @@ }, configs.monthNames[calendar.month], " ", calendar.year), React.createElement(DatepickerForwardBtns, {
       textAlign: "center"
-    }, configs.dayNames.map(function (day, index) {
+    }, configs.dayNames.map(function (day, dayIdx) {
       return React.createElement(Box, {
         fontSize: "sm",
         fontWeight: "semibold",
-        key: calendar.month + "-" + calendar.year + "-" + day + "-" + index
+        key: dayIdx
       }, day);
@@ -226,22 +260,35 @@ }), calendar.weeks.map(function (week, weekIdx) {
 
-  var date = props.date,
+  var selectedDate = props.date,
       name = props.name,
       disabled = props.disabled,
       onDateChange = props.onDateChange,
-      id = props.id; // chakra popover utils
+      id = props.id,
+      minDate = props.minDate,
+      maxDate = props.maxDate;
 
-  var ref = useRef(null);
-  var initialFocusRef = useRef(null);
+  var _useState = useState(selectedDate),
+      dateInView = _useState[0],
+      setDateInView = _useState[1];
 
-  var _useState = useState(defaultIsOpen),
-      popoverOpen = _useState[0],
-      setPopoverOpen = _useState[1];
+  var _useState2 = useState(0),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
 
-  useOutsideClick({
-    ref: ref,
-    handler: function handler() {
-      return setPopoverOpen(false);
+  var _useDisclosure = useDisclosure({
+    defaultIsOpen: defaultIsOpen
+  }),
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose,
+      isOpen = _useDisclosure.isOpen;
+
+  var onPopoverClose = function onPopoverClose() {
+    onClose();
+
+    {
+      setDateInView(selectedDate);
+      setOffset(0);
     }
-  }); // dayzed utils
+  }; // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref2) {
@@ -254,3 +301,3 @@ var selectable = _ref2.selectable,
       onDateChange(date);
-      setPopoverOpen(false);
+      onClose();
       return;
@@ -260,7 +307,2 @@ }
 
-  var dayzedData = useDayzed({
-    showOutsideDays: true,
-    onDateSelected: handleOnDateSelected,
-    selected: date
-  });
   var PopoverContentWrapper = usePortal ? Portal : React.Fragment;
@@ -270,18 +312,18 @@ return React.createElement(Popover, {
     variant: "responsive",
-    isOpen: popoverOpen,
-    onClose: function onClose() {
-      return setPopoverOpen(false);
-    },
-    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onClose: onPopoverClose,
     isLazy: true
   }, React.createElement(PopoverTrigger, null, React.createElement(Input, _extends({
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === ' ' && !isOpen) {
+        e.preventDefault();
+        onOpen();
+      }
+    },
     id: id,
     autoComplete: "off",
     isDisabled: disabled,
-    ref: initialFocusRef,
-    onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
-    },
     name: name,
-    value: date ? format(date, configs.dateFormat) : '',
+    value: selectedDate ? format(selectedDate, configs.dateFormat) : '',
     onChange: function onChange(e) {
@@ -291,56 +333,32 @@ return e.target.value;
   }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React.createElement(PopoverContentWrapper, null, React.createElement(PopoverContent, {
-    ref: ref,
     width: "100%"
-  }, React.createElement(PopoverBody, null, React.createElement(CalendarPanel, {
-    renderProps: dayzedData,
+  }, React.createElement(PopoverBody, null, React.createElement(FocusLock, null, React.createElement(CalendarPanel, {
+    dayzedHookProps: {
+      showOutsideDays: true,
+      onDateSelected: handleOnDateSelected,
+      selected: selectedDate,
+      date: dateInView,
+      minDate: minDate,
+      maxDate: maxDate,
+      offset: offset,
+      onOffsetChanged: setOffset
+    },
     configs: configs,
     propsConfigs: propsConfigs
-  })))));
+  }))))));
 };
 
-var _excluded = ["configs", "propsConfigs", "initDate", "id", "name", "usePortal", "defaultIsOpen"];
+var _excluded = ["configs", "propsConfigs", "id", "name", "usePortal", "defaultIsOpen"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
-  var configs = _ref.configs,
+  var dayzedHookProps = _ref.dayzedHookProps,
+      configs = _ref.configs,
       propsConfigs = _ref.propsConfigs,
-      selected = _ref.selected,
-      renderProps = _ref.renderProps;
+      selected = _ref.selected;
 
   var _useState = useState(null),
       hoveredDate = _useState[0],
-      setHoveredDate = _useState[1];
+      setHoveredDate = _useState[1]; // Calendar level
 
-  var calendars = renderProps.calendars; // looking for a useRef() approach to replace it
 
-  var getKeyOffset = function getKeyOffset(num) {
-    var e = document.activeElement;
-    var buttons = document.querySelectorAll('button');
-    buttons.forEach(function (el, i) {
-      var newNodeKey = i + num;
-
-      if (el === e) {
-        if (newNodeKey <= buttons.length - 1 && newNodeKey >= 0) {
-          buttons[newNodeKey].focus();
-        } else {
-          buttons[0].focus();
-        }
-      }
-    });
-  };
-
-  ArrowKeysReact.config({
-    left: function left() {
-      getKeyOffset(-1);
-    },
-    right: function right() {
-      getKeyOffset(1);
-    },
-    up: function up() {
-      getKeyOffset(-7);
-    },
-    down: function down() {
-      getKeyOffset(7);
-    }
-  }); // Calendar level
-
   var onMouseLeave = function onMouseLeave() {
@@ -374,7 +392,6 @@ setHoveredDate(null);
 
-  if (!(calendars.length > 0)) return null;
-  return React.createElement(Flex, _extends({}, ArrowKeysReact.events, {
+  return React.createElement(Flex, {
     onMouseLeave: onMouseLeave
-  }), React.createElement(CalendarPanel, {
-    renderProps: renderProps,
+  }, React.createElement(CalendarPanel, {
+    dayzedHookProps: dayzedHookProps,
     configs: configs,
@@ -397,4 +414,2 @@ propsConfigs: propsConfigs,
       propsConfigs = _ref2$propsConfigs === void 0 ? {} : _ref2$propsConfigs,
-      _ref2$initDate = _ref2.initDate,
-      initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
       id = _ref2.id,
@@ -413,16 +428,18 @@ name = _ref2.name,
 
-  var ref = useRef(null);
-  var initialFocusRef = useRef(null);
+  var _useState2 = useState(selectedDates[0] || new Date()),
+      dateInView = _useState2[0],
+      setDateInView = _useState2[1];
 
-  var _useState2 = useState(defaultIsOpen),
-      popoverOpen = _useState2[0],
-      setPopoverOpen = _useState2[1];
+  var _useState3 = useState(0),
+      offset = _useState3[0],
+      setOffset = _useState3[1];
 
-  useOutsideClick({
-    ref: ref,
-    handler: function handler() {
-      return setPopoverOpen(false);
-    }
-  }); // dayzed utils
+  var _useDisclosure = useDisclosure({
+    defaultIsOpen: defaultIsOpen
+  }),
+      onOpen = _useDisclosure.onOpen,
+      onClose = _useDisclosure.onClose,
+      isOpen = _useDisclosure.isOpen; // dayzed utils
 
+
   var handleOnDateSelected = function handleOnDateSelected(_ref3) {
@@ -458,11 +475,9 @@ var selectable = _ref3.selectable,
 
-  var dayzedData = useDayzed({
-    onDateSelected: handleOnDateSelected,
-    selected: selectedDates,
-    monthsToDisplay: 2,
-    date: initDate,
-    minDate: minDate,
-    maxDate: maxDate
-  }); // eventually we want to allow user to freely type their own input and parse the input
+  var onPopoverClose = function onPopoverClose() {
+    onClose();
+    setDateInView(selectedDates[0] || new Date());
+    setOffset(0);
+  }; // eventually we want to allow user to freely type their own input and parse the input
 
+
   var intVal = selectedDates[0] ? "" + format(selectedDates[0], configs.dateFormat) : '';
@@ -474,7 +489,5 @@ intVal += selectedDates[1] ? " - " + format(selectedDates[1], configs.dateFormat) : '';
     variant: "responsive",
-    isOpen: popoverOpen,
-    onClose: function onClose() {
-      return setPopoverOpen(false);
-    },
-    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    onClose: onPopoverClose,
     isLazy: true
@@ -485,6 +498,2 @@ }, React.createElement(PopoverTrigger, null, React.createElement(Input, _extends({
     isDisabled: disabled,
-    ref: initialFocusRef,
-    onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
-    },
     name: name,
@@ -496,10 +505,18 @@ value: intVal,
   }, propsConfigs.inputProps))), React.createElement(PopoverContentWrapper, null, React.createElement(PopoverContent, {
-    ref: ref,
     width: "100%"
-  }, React.createElement(PopoverBody, null, React.createElement(RangeCalendarPanel, {
-    renderProps: dayzedData,
+  }, React.createElement(PopoverBody, null, React.createElement(FocusLock, null, React.createElement(RangeCalendarPanel, {
+    dayzedHookProps: {
+      onDateSelected: handleOnDateSelected,
+      selected: selectedDates,
+      monthsToDisplay: 2,
+      date: dateInView,
+      minDate: minDate,
+      maxDate: maxDate,
+      offset: offset,
+      onOffsetChanged: setOffset
+    },
     configs: configs,
     propsConfigs: propsConfigs,
     selected: selectedDates
-  })))));
+  }))))));
 };
@@ -506,0 +523,0 @@

dist/components/calendarPanel.d.ts

@@ -1,6 +0,6 @@
-import { RenderProps } from 'dayzed';
+import { Props as DayzedHookProps } from 'dayzed';
 import React from 'react';
 import { DatepickerConfigs, DatepickerProps } from '../utils/commonTypes';
 interface CalendarPanelProps extends DatepickerProps {
-    renderProps: RenderProps;
+    dayzedHookProps: DayzedHookProps;
     configs: DatepickerConfigs;
@@ -7,0 +7,0 @@ onMouseEnterHighlight?: (date: Date) => void;

dist/range.d.ts

 import React from 'react';
 import { DatepickerConfigs, DatepickerProps } from './utils/commonTypes';
 export interface RangeDatepickerProps extends DatepickerProps {
-    initDate?: Date;
     selectedDates: Date[];
-    minDate?: Date;
-    maxDate?: Date;
     configs?: DatepickerConfigs;
@@ -9,0 +6,0 @@ disabled?: boolean;

dist/single.d.ts

@@ -5,6 +5,6 @@ import React from 'react';
     date?: Date;
+    onDateChange: (date: Date) => void;
     configs?: DatepickerConfigs;
     disabled?: boolean;
     defaultIsOpen?: boolean;
-    onDateChange: (date: Date) => void;
     id?: string;
@@ -11,0 +11,0 @@ name?: string;

dist/utils/commonTypes.d.ts

@@ -7,2 +7,4 @@ /// <reference types="react" />
 export interface DatepickerProps {
+    minDate?: Date;
+    maxDate?: Date;
     propsConfigs?: PropsConfigs;
@@ -9,0 +11,0 @@ }

package.json

 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
@@ -80,4 +80,5 @@ "main": "dist/index.js",
   "dependencies": {
-    "arrow-keys-react": "^1.0.6"
+    "arrow-keys-react": "^1.0.6",
+    "react-focus-lock": "^2.5.2"
   }
 }

README.md

@@ -96,2 +96,3 @@ # A Simple Chakra Datepicker based on Dayzed.
 usePortal             | boolean                | undefined               | to prevent parent styles from clipping or hiding content
+defaultIsOpen         | boolean                | undefined               | open the date panel at the beginning
 
@@ -98,0 +99,0 @@ For version < `npm@0.1.6`:</br>

src/utils/commonTypes.ts

@@ -11,2 +11,4 @@ import { ButtonProps } from '@chakra-ui/button';
 export interface DatepickerProps {
+  minDate?: Date;
+  maxDate?: Date;
   propsConfigs?: PropsConfigs;
@@ -13,0 +15,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

166075

increased by3.12%

Lines of code

1686

increased by3.25%

Number of lines in readme file

109

increased by0.93%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedreact-focus-lock@^2.5.2

• + Added@babel/runtime@7.26.7(transitive)

• + Addeddetect-node-es@1.1.0(transitive)

• + Addedfocus-lock@1.3.6(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-clientside-effect@1.2.7(transitive)

• + Addedreact-focus-lock@2.13.5(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addeduse-callback-ref@1.3.3(transitive)

• + Addeduse-sidecar@1.1.3(transitive)