chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

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

@@ -199,3 +199,3 @@ 'use strict';
 
-var _excluded$1 = ["configs", "propsConfigs"];
+var _excluded$1 = ["configs", "propsConfigs", "usePortal"];
 var DefaultConfigs$1 = {
@@ -210,2 +210,3 @@ dateFormat: 'yyyy-MM-dd',
       propsConfigs = _ref.propsConfigs,
+      usePortal = _ref.usePortal,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -250,2 +251,3 @@
   });
+  var PopoverContentWrapper = usePortal ? react.Portal : React__default["default"].Fragment;
   return React__default["default"].createElement(react.Popover, {
@@ -273,3 +275,3 @@ placement: "bottom-start",
     }
-  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React__default["default"].createElement(react.PopoverContent, {
+  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React__default["default"].createElement(PopoverContentWrapper, null, React__default["default"].createElement(react.PopoverContent, {
     ref: ref,
@@ -281,6 +283,6 @@ width: "100%"
     propsConfigs: propsConfigs
-  }))));
+  })))));
 };
 
-var _excluded = ["configs", "propsConfigs", "initDate", "id", "name"];
+var _excluded = ["configs", "propsConfigs", "initDate", "id", "name", "usePortal"];
 
@@ -384,2 +386,3 @@ var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
       name = _ref2.name,
+      usePortal = _ref2.usePortal,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -448,2 +451,3 @@
   intVal += selectedDates[1] ? " - " + dateFns.format(selectedDates[1], configs.dateFormat) : '';
+  var PopoverContentWrapper = usePortal ? react.Portal : React__default["default"].Fragment;
   return React__default["default"].createElement(react.Popover, {
@@ -471,3 +475,3 @@ placement: "bottom-start",
     }
-  }, propsConfigs.inputProps))), React__default["default"].createElement(react.PopoverContent, {
+  }, propsConfigs.inputProps))), React__default["default"].createElement(PopoverContentWrapper, null, React__default["default"].createElement(react.PopoverContent, {
     ref: ref,
@@ -480,3 +484,3 @@ width: "100%"
     selected: selectedDates
-  }))));
+  })))));
 };
@@ -483,0 +487,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"},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:f?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}))))};
+"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","usePortal"],E={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},P=["configs","propsConfigs","initDate","id","name","usePortal"],b=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},C={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?C: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=s(a,P),y=h.selectedDates,E=h.minDate,D=h.maxDate,k=h.onDateChange,B=h.disabled,F=e.useRef(null),O=e.useRef(null),M=e.useState(!1),S=M[0],x=M[1];t.useOutsideClick({ref:F,handler:function(){return x(!1)}});var w=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(y);y.length?1===y.length?(y[0]<t?n.push(t):n.unshift(t),k(n)):2===n.length&&k([t]):(n.push(t),k(n))}},selected:y,monthsToDisplay:2,date:p,minDate:E,maxDate:D}),N=y[0]?""+r.format(y[0],u.dateFormat):"";N+=y[1]?" - "+r.format(y[1],u.dateFormat):"";var R=v?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:S,onClose:function(){return x(!1)},initialFocusRef:O,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,i({id:m,autoComplete:"off",isDisabled:B,ref:O,onClick:function(){return x(!S)},name:g,value:N,onChange:function(e){return e.target.value}},c.inputProps))),l.default.createElement(R,null,l.default.createElement(t.PopoverContent,{ref:F,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(b,{renderProps:w,configs:u,propsConfigs:c,selected:y})))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?E:o,d=a.propsConfigs,c=a.usePortal,f=s(a,y),p=f.date,m=f.name,g=f.disabled,v=f.onDateChange,P=f.id,b=e.useRef(null),C=e.useRef(null),D=e.useState(!1),k=D[0],B=D[1];t.useOutsideClick({ref:b,handler:function(){return B(!1)}});var F=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(v(t),void B(!1)):void 0},selected:p}),O=c?t.Portal:l.default.Fragment;return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:k,onClose:function(){return B(!1)},initialFocusRef:C,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,i({id:P,autoComplete:"off",isDisabled:g,ref:C,onClick:function(){return B(!k)},name:m,value:p?r.format(p,u.dateFormat):"",onChange:function(e){return e.target.value}},null==d?void 0:d.inputProps))),l.default.createElement(O,null,l.default.createElement(t.PopoverContent,{ref:b,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(h,{renderProps:F,configs:u,propsConfigs:d})))))};
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.production.min.js.map

dist/chakra-dayzed-datepicker.esm.js

 import React, { Fragment, useRef, useState } from 'react';
-import { Button, Stack, VStack, HStack, Heading, Divider, SimpleGrid, Box, useOutsideClick, Popover, PopoverTrigger, Input, PopoverContent, PopoverBody, Flex } from '@chakra-ui/react';
+import { Button, Stack, VStack, HStack, Heading, Divider, SimpleGrid, Box, useOutsideClick, Popover, PopoverTrigger, Input, PopoverContent, PopoverBody, Portal, Flex } from '@chakra-ui/react';
 import { useDayzed } from 'dayzed';
@@ -190,3 +190,3 @@ import { format } from 'date-fns';
 
-var _excluded$1 = ["configs", "propsConfigs"];
+var _excluded$1 = ["configs", "propsConfigs", "usePortal"];
 var DefaultConfigs$1 = {
@@ -201,2 +201,3 @@ dateFormat: 'yyyy-MM-dd',
       propsConfigs = _ref.propsConfigs,
+      usePortal = _ref.usePortal,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -241,2 +242,3 @@
   });
+  var PopoverContentWrapper = usePortal ? Portal : React.Fragment;
   return React.createElement(Popover, {
@@ -264,3 +266,3 @@ placement: "bottom-start",
     }
-  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React.createElement(PopoverContent, {
+  }, propsConfigs == null ? void 0 : propsConfigs.inputProps))), React.createElement(PopoverContentWrapper, null, React.createElement(PopoverContent, {
     ref: ref,
@@ -272,6 +274,6 @@ width: "100%"
     propsConfigs: propsConfigs
-  }))));
+  })))));
 };
 
-var _excluded = ["configs", "propsConfigs", "initDate", "id", "name"];
+var _excluded = ["configs", "propsConfigs", "initDate", "id", "name", "usePortal"];
 
@@ -375,2 +377,3 @@ var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
       name = _ref2.name,
+      usePortal = _ref2.usePortal,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -439,2 +442,3 @@
   intVal += selectedDates[1] ? " - " + format(selectedDates[1], configs.dateFormat) : '';
+  var PopoverContentWrapper = usePortal ? Portal : React.Fragment;
   return React.createElement(Popover, {
@@ -462,3 +466,3 @@ placement: "bottom-start",
     }
-  }, propsConfigs.inputProps))), React.createElement(PopoverContent, {
+  }, propsConfigs.inputProps))), React.createElement(PopoverContentWrapper, null, React.createElement(PopoverContent, {
     ref: ref,
@@ -471,3 +475,3 @@ width: "100%"
     selected: selectedDates
-  }))));
+  })))));
 };
@@ -474,0 +478,0 @@

dist/range.d.ts

@@ -13,3 +13,4 @@ import React from 'react';
     name?: string;
+    usePortal?: boolean;
 }
 export declare const RangeDatepicker: React.FC<RangeDatepickerProps>;

dist/single.d.ts

@@ -10,3 +10,4 @@ import React from 'react';
     name?: string;
+    usePortal?: boolean;
 }
 export declare const SingleDatepicker: React.FC<SingleDatepickerProps>;

package.json

 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
@@ -52,3 +52,3 @@ "main": "dist/index.js",
       "path": "dist/chakra-dayzed-datepicker.cjs.production.min.js",
-      "limit": "10 KB"
+      "limit": "250 KB"
     },
@@ -55,0 +55,0 @@ {

README.md

@@ -66,2 +66,9 @@ # A Simple Chakra Datepicker based on Dayzed.
   }}
-```
+```
+
+### other props: 
+
+Name                  | Type                   | Default value           | Description
+----------------------|------------------------|-------------------------|--------------
+name                  | string                 | undefined               | name attribute for `<input />` element
+usePortal             | boolean                | undefined               | to prevent parent styles from clipping or hiding content

No alert changes

Improved metrics

Total package byte prevSize

153058

2.62%

Lines of code

1565

1.49%

Number of lines in readme file

74

12.12%

No dependency changes