@reecelucas/react-datepicker - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

esm/components/DatePicker.js

@@ -29,6 +29,7 @@ var __assign = (this && this.__assign) || function () {
 import { getClosestSelectableDate } from '../helpers/date';
-import { useUpdateEffect, useClickOutside } from '../helpers/hooks';
+import { useUpdateEffect } from '../helpers/hooks';
 var DatePicker = function (_a) {
     var children = _a.children, onSelect = _a.onSelect, _b = _a.initialDate, initialDate = _b === void 0 ? new Date(Date.now()) : _b, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, locale = _a.locale, props = __rest(_a, ["children", "onSelect", "initialDate", "minDate", "maxDate", "excludeDates", "includeDates", "locale"]);
-    var ref = React.useRef(null);
+    var calendarRef = React.useRef(null);
+    var inputRef = React.useRef(null);
     var initDate = getClosestSelectableDate({
@@ -59,10 +60,22 @@ date: initialDate,
     });
+    React.useEffect(function () {
+        document.addEventListener('click', onClickOutside, true);
+        return function () {
+            document.removeEventListener('click', onClickOutside, true);
+        };
+    });
     useUpdateEffect(function () {
         onSelect(state.selectedDate);
     }, [state.selectedDate]);
-    useClickOutside(ref, function () {
-        if (state.showCalendar) {
+    var onClickOutside = function (event) {
+        var isInput = inputRef &&
+            inputRef.current &&
+            inputRef.current.contains(event.target);
+        var isCalendar = calendarRef &&
+            calendarRef.current &&
+            calendarRef.current.contains(event.target);
+        if (event.target && state.showCalendar && !(isInput || isCalendar)) {
             dispatch({ type: actionTypes.HIDE_CALENDAR });
         }
-    });
+    };
     var onInputKeyDown = function (event) {
@@ -154,7 +167,9 @@ if (event.key === 'Down' || event.key === 'ArrowDown') {
         includeDates: includeDates,
-        locale: locale })); };
+        locale: locale,
+        calendarRef: calendarRef,
+        inputRef: inputRef })); };
     return (React.createElement(StateContext.Provider, { value: getContextValues() },
         React.createElement(DispatchContext.Provider, { value: dispatch },
-            React.createElement("div", __assign({ ref: ref }, props), children))));
+            React.createElement("div", __assign({}, props), children))));
 };
 export default DatePicker;

esm/components/DatePickerCalendar.d.ts

 import * as React from 'react';
-interface Props {
+interface Props extends React.HTMLProps<HTMLDivElement> {
     children: React.ReactNode;
 }
-declare const DatePickerCalendar: ({ children }: Props) => JSX.Element | null;
+declare const DatePickerCalendar: ({ children, ...props }: Props) => JSX.Element | null;
 export default DatePickerCalendar;

esm/components/DatePickerCalendar.js

@@ -0,8 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
 import { StateContext } from './DatePickerContext';
 var DatePickerCalendar = function (_a) {
-    var children = _a.children;
-    var showCalendar = React.useContext(StateContext).showCalendar;
-    return showCalendar ? React.createElement(React.Fragment, null, children) : null;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = React.useContext(StateContext), showCalendar = _b.showCalendar, calendarRef = _b.calendarRef;
+    return showCalendar ? (React.createElement("div", __assign({ ref: calendarRef }, props), children)) : null;
 };
 export default DatePickerCalendar;

esm/components/DatePickerInput.js

@@ -35,3 +35,3 @@ var __assign = (this && this.__assign) || function () {
     var dispatch = React.useContext(DispatchContext);
-    var _c = React.useContext(StateContext), selectedDate = _c.selectedDate, showCalendar = _c.showCalendar, locale = _c.locale;
+    var _c = React.useContext(StateContext), selectedDate = _c.selectedDate, showCalendar = _c.showCalendar, locale = _c.locale, inputRef = _c.inputRef;
     var _d = React.useState(props.placeholder ? '' : format(selectedDate, dateFormat, { locale: locale })), value = _d[0], setValue = _d[1];
@@ -67,3 +67,3 @@ var debouncedValue = useDebounce(value, 500);
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", __assign({ type: 'text', value: value, onChange: onChange, onFocus: onFocus, "aria-describedby": SCREEN_READER_MESSAGE_ID }, rest)),
+        React.createElement("input", __assign({ ref: inputRef, type: 'text', value: value, onChange: onChange, onFocus: onFocus, "aria-describedby": SCREEN_READER_MESSAGE_ID }, rest)),
         React.createElement(DatePickerDescription, { message: screenReaderMessage && isFunction(screenReaderMessage)
@@ -70,0 +70,0 @@ ? screenReaderMessage()

esm/helpers/hooks.d.ts

 import * as React from 'react';
 export declare const useDebounce: <T>(value: T, delay: number) => T;
 export declare const useUpdateEffect: typeof React.useEffect;
-export declare const useClickOutside: (elemRef: React.RefObject<any>, fn: (event: Event) => void) => void;

esm/helpers/hooks.js

@@ -22,17 +22,1 @@ import * as React from 'react';
 };
-export var useClickOutside = function (elemRef, fn) {
-    React.useEffect(function () {
-        var clickOutside = function (event) {
-            if (event.target &&
-                elemRef &&
-                elemRef.current &&
-                !elemRef.current.contains(event.target)) {
-                fn(event);
-            }
-        };
-        document.addEventListener('click', clickOutside, true);
-        return function () {
-            document.removeEventListener('click', clickOutside, true);
-        };
-    });
-};

lib/components/DatePicker.js

@@ -34,3 +34,4 @@ "use strict";
     var children = _a.children, onSelect = _a.onSelect, _b = _a.initialDate, initialDate = _b === void 0 ? new Date(Date.now()) : _b, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, locale = _a.locale, props = __rest(_a, ["children", "onSelect", "initialDate", "minDate", "maxDate", "excludeDates", "includeDates", "locale"]);
-    var ref = React.useRef(null);
+    var calendarRef = React.useRef(null);
+    var inputRef = React.useRef(null);
     var initDate = date_1.getClosestSelectableDate({
@@ -61,10 +62,22 @@ date: initialDate,
     });
+    React.useEffect(function () {
+        document.addEventListener('click', onClickOutside, true);
+        return function () {
+            document.removeEventListener('click', onClickOutside, true);
+        };
+    });
     hooks_1.useUpdateEffect(function () {
         onSelect(state.selectedDate);
     }, [state.selectedDate]);
-    hooks_1.useClickOutside(ref, function () {
-        if (state.showCalendar) {
+    var onClickOutside = function (event) {
+        var isInput = inputRef &&
+            inputRef.current &&
+            inputRef.current.contains(event.target);
+        var isCalendar = calendarRef &&
+            calendarRef.current &&
+            calendarRef.current.contains(event.target);
+        if (event.target && state.showCalendar && !(isInput || isCalendar)) {
             dispatch({ type: actionTypes.HIDE_CALENDAR });
         }
-    });
+    };
     var onInputKeyDown = function (event) {
@@ -156,7 +169,9 @@ if (event.key === 'Down' || event.key === 'ArrowDown') {
         includeDates: includeDates,
-        locale: locale })); };
+        locale: locale,
+        calendarRef: calendarRef,
+        inputRef: inputRef })); };
     return (React.createElement(DatePickerContext_1.StateContext.Provider, { value: getContextValues() },
         React.createElement(DatePickerContext_1.DispatchContext.Provider, { value: dispatch },
-            React.createElement("div", __assign({ ref: ref }, props), children))));
+            React.createElement("div", __assign({}, props), children))));
 };
 exports.default = DatePicker;

lib/components/DatePickerCalendar.d.ts

 import * as React from 'react';
-interface Props {
+interface Props extends React.HTMLProps<HTMLDivElement> {
     children: React.ReactNode;
 }
-declare const DatePickerCalendar: ({ children }: Props) => JSX.Element | null;
+declare const DatePickerCalendar: ({ children, ...props }: Props) => JSX.Element | null;
 export default DatePickerCalendar;

lib/components/DatePickerCalendar.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -6,6 +28,6 @@ var React = require("react");
 var DatePickerCalendar = function (_a) {
-    var children = _a.children;
-    var showCalendar = React.useContext(DatePickerContext_1.StateContext).showCalendar;
-    return showCalendar ? React.createElement(React.Fragment, null, children) : null;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = React.useContext(DatePickerContext_1.StateContext), showCalendar = _b.showCalendar, calendarRef = _b.calendarRef;
+    return showCalendar ? (React.createElement("div", __assign({ ref: calendarRef }, props), children)) : null;
 };
 exports.default = DatePickerCalendar;

lib/components/DatePickerInput.js

@@ -37,3 +37,3 @@ "use strict";
     var dispatch = React.useContext(DatePickerContext_1.DispatchContext);
-    var _c = React.useContext(DatePickerContext_1.StateContext), selectedDate = _c.selectedDate, showCalendar = _c.showCalendar, locale = _c.locale;
+    var _c = React.useContext(DatePickerContext_1.StateContext), selectedDate = _c.selectedDate, showCalendar = _c.showCalendar, locale = _c.locale, inputRef = _c.inputRef;
     var _d = React.useState(props.placeholder ? '' : date_fns_1.format(selectedDate, dateFormat, { locale: locale })), value = _d[0], setValue = _d[1];
@@ -69,3 +69,3 @@ var debouncedValue = hooks_1.useDebounce(value, 500);
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", __assign({ type: 'text', value: value, onChange: onChange, onFocus: onFocus, "aria-describedby": constants_1.SCREEN_READER_MESSAGE_ID }, rest)),
+        React.createElement("input", __assign({ ref: inputRef, type: 'text', value: value, onChange: onChange, onFocus: onFocus, "aria-describedby": constants_1.SCREEN_READER_MESSAGE_ID }, rest)),
         React.createElement(DatePickerDescription_1.default, { message: screenReaderMessage && function_1.isFunction(screenReaderMessage)
@@ -72,0 +72,0 @@ ? screenReaderMessage()

lib/helpers/hooks.d.ts

 import * as React from 'react';
 export declare const useDebounce: <T>(value: T, delay: number) => T;
 export declare const useUpdateEffect: typeof React.useEffect;
-export declare const useClickOutside: (elemRef: React.RefObject<any>, fn: (event: Event) => void) => void;

lib/helpers/hooks.js

@@ -24,17 +24,1 @@ "use strict";
 };
-exports.useClickOutside = function (elemRef, fn) {
-    React.useEffect(function () {
-        var clickOutside = function (event) {
-            if (event.target &&
-                elemRef &&
-                elemRef.current &&
-                !elemRef.current.contains(event.target)) {
-                fn(event);
-            }
-        };
-        document.addEventListener('click', clickOutside, true);
-        return function () {
-            document.removeEventListener('click', clickOutside, true);
-        };
-    });
-};

package.json

 {
   "name": "@reecelucas/react-datepicker",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An accessible, internationalizable React datepicker",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -294,2 +294,4 @@ # react-datepicker
 
+> Any props not listed above will be spread onto the underlying `DatePickerCalendar` element.
+
 ### `DatePickerMonth`
@@ -296,0 +298,0 @@

No alert changes

Improved metrics

Total package byte prevSize

83170

increased by2.68%

Lines of code

1601

increased by2.56%

Number of lines in readme file

370

increased by0.54%

No dependency changes