@wojtekmaj/react-daterange-picker - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

dist/cjs/DateRangePicker.d.ts

 import React from 'react';
-import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
-import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
-type Icon = React.ReactElement | string;
+import type { ReactNodeArray } from 'prop-types';
+import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
+type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
@@ -55,43 +55,3 @@ type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
 } & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
-declare namespace DateRangePicker {
-    var propTypes: {
-        autoFocus: PropTypes.Requireable<boolean>;
-        calendarAriaLabel: PropTypes.Requireable<string>;
-        calendarClassName: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        calendarIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        className: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        clearAriaLabel: PropTypes.Requireable<string>;
-        clearIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        closeCalendar: PropTypes.Requireable<boolean>;
-        'data-testid': PropTypes.Requireable<string>;
-        dayAriaLabel: PropTypes.Requireable<string>;
-        dayPlaceholder: PropTypes.Requireable<string>;
-        disableCalendar: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        format: PropTypes.Requireable<string>;
-        id: PropTypes.Requireable<string>;
-        isOpen: PropTypes.Requireable<boolean>;
-        locale: PropTypes.Requireable<string>;
-        maxDate: PropTypes.Validator<Date | null | undefined>;
-        maxDetail: PropTypes.Requireable<string>;
-        minDate: PropTypes.Validator<Date | null | undefined>;
-        monthAriaLabel: PropTypes.Requireable<string>;
-        monthPlaceholder: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        nativeInputAriaLabel: PropTypes.Requireable<string>;
-        onCalendarClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onCalendarOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        openCalendarOnFocus: PropTypes.Requireable<boolean>;
-        portalContainer: PropTypes.Requireable<object>;
-        rangeDivider: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        required: PropTypes.Requireable<boolean>;
-        showLeadingZeros: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<NonNullable<NonNullable<string | Date | null | undefined> | import("./shared/types").Range<NonNullable<string | Date | null | undefined>> | null | undefined>>;
-        yearAriaLabel: PropTypes.Requireable<string>;
-        yearPlaceholder: PropTypes.Requireable<string>;
-    };
-}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
 export default DateRangePicker;

dist/cjs/DateRangePicker.js

@@ -60,3 +60,3 @@ "use strict";
 var DateInput_1 = __importDefault(require("react-date-picker/dist/cjs/DateInput"));
-var propTypes_1 = require("./shared/propTypes");
+var propTypes_js_1 = require("./shared/propTypes.js");
 var baseClassName = 'react-daterange-picker';
@@ -80,3 +80,3 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
     react_1.default.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-function DateRangePicker(props) {
+var DateRangePicker = function DateRangePicker(props) {
     var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -246,6 +246,5 @@ var _j = (0, react_1.useState)(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         renderCalendar()));
-}
-exports.default = DateRangePicker;
+};
 var isValue = prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.instanceOf(Date)]);
-var isValueOrValueArray = prop_types_1.default.oneOfType([isValue, (0, propTypes_1.rangeOf)(isValue)]);
+var isValueOrValueArray = prop_types_1.default.oneOfType([isValue, (0, propTypes_js_1.rangeOf)(isValue)]);
 DateRangePicker.propTypes = {
@@ -269,5 +268,5 @@ autoFocus: prop_types_1.default.bool,
     locale: prop_types_1.default.string,
-    maxDate: propTypes_1.isMaxDate,
+    maxDate: propTypes_js_1.isMaxDate,
     maxDetail: prop_types_1.default.oneOf(allViews),
-    minDate: propTypes_1.isMinDate,
+    minDate: propTypes_js_1.isMinDate,
     monthAriaLabel: prop_types_1.default.string,
@@ -282,3 +281,3 @@ monthPlaceholder: prop_types_1.default.string,
     openCalendarOnFocus: prop_types_1.default.bool,
-    portalContainer: prop_types_1.default.object,
+    portalContainer: prop_types_1.default.instanceOf(HTMLElement),
     rangeDivider: prop_types_1.default.node,
@@ -291,1 +290,2 @@ required: prop_types_1.default.bool,
 };
+exports.default = DateRangePicker;

dist/cjs/index.d.ts

@@ -1,4 +0,4 @@
-import DateRangePicker from './DateRangePicker';
-export type { DateRangePickerProps } from './DateRangePicker';
+import DateRangePicker from './DateRangePicker.js';
+export type { DateRangePickerProps } from './DateRangePicker.js';
 export { DateRangePicker };
 export default DateRangePicker;

dist/cjs/index.js

@@ -7,4 +7,4 @@ "use strict";
 exports.DateRangePicker = void 0;
-var DateRangePicker_1 = __importDefault(require("./DateRangePicker"));
-exports.DateRangePicker = DateRangePicker_1.default;
-exports.default = DateRangePicker_1.default;
+var DateRangePicker_js_1 = __importDefault(require("./DateRangePicker.js"));
+exports.DateRangePicker = DateRangePicker_js_1.default;
+exports.default = DateRangePicker_js_1.default;

dist/cjs/shared/propTypes.d.ts

 import PropTypes from 'prop-types';
 import type { Requireable, Validator } from 'prop-types';
-import type { Range } from './types';
+import type { Range } from './types.js';
 export declare const isMinDate: Validator<Date | null | undefined>;
 export declare const isMaxDate: Validator<Date | null | undefined>;
 export declare const rangeOf: <T>(type: PropTypes.Requireable<T>) => PropTypes.Requireable<Range<T>>;

dist/esm/DateRangePicker.d.ts

 import React from 'react';
-import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
 import Calendar from 'react-calendar';
-import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
-type Icon = React.ReactElement | string;
+import type { ReactNodeArray } from 'prop-types';
+import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
+type Icon = React.ReactElement | ReactNodeArray | null | string | number | boolean;
 type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
@@ -55,43 +55,3 @@ type CalendarProps = Omit<React.ComponentPropsWithoutRef<typeof Calendar>, 'className' | 'maxDetail' | 'onChange'>;
 } & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;
-declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;
-declare namespace DateRangePicker {
-    var propTypes: {
-        autoFocus: PropTypes.Requireable<boolean>;
-        calendarAriaLabel: PropTypes.Requireable<string>;
-        calendarClassName: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        calendarIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        className: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        clearAriaLabel: PropTypes.Requireable<string>;
-        clearIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-        closeCalendar: PropTypes.Requireable<boolean>;
-        'data-testid': PropTypes.Requireable<string>;
-        dayAriaLabel: PropTypes.Requireable<string>;
-        dayPlaceholder: PropTypes.Requireable<string>;
-        disableCalendar: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        format: PropTypes.Requireable<string>;
-        id: PropTypes.Requireable<string>;
-        isOpen: PropTypes.Requireable<boolean>;
-        locale: PropTypes.Requireable<string>;
-        maxDate: PropTypes.Validator<Date | null | undefined>;
-        maxDetail: PropTypes.Requireable<string>;
-        minDate: PropTypes.Validator<Date | null | undefined>;
-        monthAriaLabel: PropTypes.Requireable<string>;
-        monthPlaceholder: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        nativeInputAriaLabel: PropTypes.Requireable<string>;
-        onCalendarClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onCalendarOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        openCalendarOnFocus: PropTypes.Requireable<boolean>;
-        portalContainer: PropTypes.Requireable<object>;
-        rangeDivider: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        required: PropTypes.Requireable<boolean>;
-        showLeadingZeros: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<NonNullable<NonNullable<string | Date | null | undefined> | import("./shared/types").Range<NonNullable<string | Date | null | undefined>> | null | undefined>>;
-        yearAriaLabel: PropTypes.Requireable<string>;
-        yearPlaceholder: PropTypes.Requireable<string>;
-    };
-}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
 export default DateRangePicker;

dist/esm/DateRangePicker.js

@@ -32,3 +32,3 @@ 'use client';
 import DateInput from 'react-date-picker/dist/cjs/DateInput';
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes';
+import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
 var baseClassName = 'react-daterange-picker';
@@ -52,3 +52,3 @@ var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
     React.createElement("line", { x1: "15", x2: "4", y1: "4", y2: "15" })));
-export default function DateRangePicker(props) {
+var DateRangePicker = function DateRangePicker(props) {
     var autoFocus = props.autoFocus, calendarAriaLabel = props.calendarAriaLabel, _a = props.calendarIcon, calendarIcon = _a === void 0 ? CalendarIcon : _a, className = props.className, clearAriaLabel = props.clearAriaLabel, _b = props.clearIcon, clearIcon = _b === void 0 ? ClearIcon : _b, _c = props.closeCalendar, shouldCloseCalendarOnSelect = _c === void 0 ? true : _c, dataTestid = props["data-testid"], dayAriaLabel = props.dayAriaLabel, dayPlaceholder = props.dayPlaceholder, disableCalendar = props.disableCalendar, disabled = props.disabled, format = props.format, id = props.id, _d = props.isOpen, isOpenProps = _d === void 0 ? null : _d, locale = props.locale, maxDate = props.maxDate, _e = props.maxDetail, maxDetail = _e === void 0 ? 'month' : _e, minDate = props.minDate, monthAriaLabel = props.monthAriaLabel, monthPlaceholder = props.monthPlaceholder, _f = props.name, name = _f === void 0 ? 'daterange' : _f, nativeInputAriaLabel = props.nativeInputAriaLabel, onCalendarClose = props.onCalendarClose, onCalendarOpen = props.onCalendarOpen, onChangeProps = props.onChange, onFocusProps = props.onFocus, onInvalidChange = props.onInvalidChange, _g = props.openCalendarOnFocus, openCalendarOnFocus = _g === void 0 ? true : _g, _h = props.rangeDivider, rangeDivider = _h === void 0 ? '–' : _h, required = props.required, shouldCloseCalendar = props.shouldCloseCalendar, shouldOpenCalendar = props.shouldOpenCalendar, showLeadingZeros = props.showLeadingZeros, value = props.value, yearAriaLabel = props.yearAriaLabel, yearPlaceholder = props.yearPlaceholder, otherProps = __rest(props, ["autoFocus", "calendarAriaLabel", "calendarIcon", "className", "clearAriaLabel", "clearIcon", "closeCalendar", 'data-testid', "dayAriaLabel", "dayPlaceholder", "disableCalendar", "disabled", "format", "id", "isOpen", "locale", "maxDate", "maxDetail", "minDate", "monthAriaLabel", "monthPlaceholder", "name", "nativeInputAriaLabel", "onCalendarClose", "onCalendarOpen", "onChange", "onFocus", "onInvalidChange", "openCalendarOnFocus", "rangeDivider", "required", "shouldCloseCalendar", "shouldOpenCalendar", "showLeadingZeros", "value", "yearAriaLabel", "yearPlaceholder"]);
@@ -218,3 +218,3 @@ var _j = useState(isOpenProps), isOpen = _j[0], setIsOpen = _j[1];
         renderCalendar()));
-}
+};
 var isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
@@ -252,3 +252,3 @@ var isValueOrValueArray = PropTypes.oneOfType([isValue, rangeOf(isValue)]);
     openCalendarOnFocus: PropTypes.bool,
-    portalContainer: PropTypes.object,
+    portalContainer: PropTypes.instanceOf(HTMLElement),
     rangeDivider: PropTypes.node,
@@ -261,1 +261,2 @@ required: PropTypes.bool,
 };
+export default DateRangePicker;

dist/esm/index.d.ts

@@ -1,4 +0,4 @@
-import DateRangePicker from './DateRangePicker';
-export type { DateRangePickerProps } from './DateRangePicker';
+import DateRangePicker from './DateRangePicker.js';
+export type { DateRangePickerProps } from './DateRangePicker.js';
 export { DateRangePicker };
 export default DateRangePicker;

dist/esm/index.js

@@ -1,3 +0,3 @@
-import DateRangePicker from './DateRangePicker';
+import DateRangePicker from './DateRangePicker.js';
 export { DateRangePicker };
 export default DateRangePicker;

dist/esm/shared/propTypes.d.ts

 import PropTypes from 'prop-types';
 import type { Requireable, Validator } from 'prop-types';
-import type { Range } from './types';
+import type { Range } from './types.js';
 export declare const isMinDate: Validator<Date | null | undefined>;
 export declare const isMaxDate: Validator<Date | null | undefined>;
 export declare const rangeOf: <T>(type: PropTypes.Requireable<T>) => PropTypes.Requireable<Range<T>>;

package.json

 {
   "name": "@wojtekmaj/react-daterange-picker",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "A date range picker for your React app.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "source": "src/index.ts",
-  "types": "dist/cjs/index.d.ts",
+  "type": "module",
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./dist/DateRangePicker.css": "./dist/DateRangePicker.css"
+  },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
-    "build-js": "yarn build-js-esm && yarn build-js-cjs",
+    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
-    "copy-styles": "node --loader ts-node/esm ./copy-styles.ts",
+    "copy-styles": "cpy 'src/**/*.css' dist",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -24,3 +33,4 @@ "prepack": "yarn clean && yarn build",
     "tsc": "tsc --noEmit",
-    "unit": "vitest"
+    "unit": "vitest",
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
   },
@@ -43,7 +53,7 @@ "keywords": [
     "clsx": "^2.0.0",
-    "make-event-props": "^1.4.2",
+    "make-event-props": "^1.6.0",
     "prop-types": "^15.6.0",
-    "react-calendar": "^4.5.0",
-    "react-date-picker": "^10.2.1",
-    "react-fit": "^1.6.0"
+    "react-calendar": "^4.6.0",
+    "react-date-picker": "^10.4.1",
+    "react-fit": "^1.7.0"
   },
@@ -57,2 +67,3 @@ "devDependencies": {
     "@types/react": "*",
+    "cpy-cli": "^5.0.0",
     "eslint": "^8.26.0",
@@ -62,2 +73,3 @@ "eslint-config-wojtekmaj": "^0.9.0",
     "jsdom": "^21.1.0",
+    "nodemon": "^3.0.0",
     "prettier": "^2.7.0",
@@ -68,3 +80,2 @@ "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.0",
-    "ts-node": "^10.9.1",
     "typescript": "^5.0.0",
@@ -71,0 +82,0 @@ "vitest": "^0.30.1",

src/index.ts

@@ -1,4 +0,4 @@
-import DateRangePicker from './DateRangePicker';
+import DateRangePicker from './DateRangePicker.js';
 
-export type { DateRangePickerProps } from './DateRangePicker';
+export type { DateRangePickerProps } from './DateRangePicker.js';
 
@@ -5,0 +5,0 @@ export { DateRangePicker };

src/shared/propTypes.ts

 import PropTypes from 'prop-types';
 
 import type { Requireable, Validator } from 'prop-types';
-import type { Range } from './types';
+import type { Range } from './types.js';
 
@@ -6,0 +6,0 @@ export const isMinDate: Validator<Date | null | undefined> = function isMinDate(

No alert changes

Improved metrics

Number of package files

27

increased by3.85%

Is type module

Yes

Worsened metrics

Total package byte prevSize

121042

decreased by-3.17%

Dev dependency count

20

increased by5.26%

Lines of code

2110

decreased by-3.21%

Dependency changes

• Updatedmake-event-props@^1.6.0

• Updatedreact-calendar@^4.6.0

• Updatedreact-date-picker@^10.4.1

• Updatedreact-fit@^1.7.0