@elliemae/ds-date-range-picker 1.55.0-next.7 → 2.0.0-alpha.10

package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -1,89 +1,73 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useState, useEffect } from 'react';
 import moment from 'moment';
 import DSInputMask, { MASK_TYPES, MASK_PIPES } from '@elliemae/ds-basic/form/InputMask';
 import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
-var blockname = 'date-range-picker';
-var Header = aggregatedClasses('div')(blockname, 'header');
+const blockname = 'date-range-picker';
+const Header = aggregatedClasses('div')(blockname, 'header');
 
-var formatDate = function formatDate(date) {
+const formatDate = date => {
   if (date) {
     return date.format('MMDDYYYY');
   }
 };
 
-var DatePickerRangeHeader = function DatePickerRangeHeader(_ref) {
-  var _ref$placeholderStart = _ref.placeholderStart,
-      placeholderStart = _ref$placeholderStart === void 0 ? 'Start Date' : _ref$placeholderStart,
-      _ref$placeholderEnd = _ref.placeholderEnd,
-      placeholderEnd = _ref$placeholderEnd === void 0 ? 'End Date' : _ref$placeholderEnd,
-      _ref$onStartInputChan = _ref.onStartInputChange,
-      onStartInputChange = _ref$onStartInputChan === void 0 ? function () {
-    return null;
-  } : _ref$onStartInputChan,
-      _ref$onEndInputChange = _ref.onEndInputChange,
-      onEndInputChange = _ref$onEndInputChange === void 0 ? function () {
-    return null;
-  } : _ref$onEndInputChange,
-      selectedStartDate = _ref.selectedStartDate,
-      selectedEndDate = _ref.selectedEndDate;
-
-  var _useState = useState(selectedStartDate ? formatDate(selectedStartDate) : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      startValue = _useState2[0],
-      setStartValue = _useState2[1];
-
-  var _useState3 = useState(selectedEndDate ? formatDate(selectedEndDate) : ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endValue = _useState4[0],
-      setEndValue = _useState4[1];
-
-  useEffect(function () {
-    var startDate = formatDate(selectedStartDate);
-    var endDate = formatDate(selectedEndDate);
+const DatePickerRangeHeader = ({
+  placeholderStart = 'Start Date',
+  placeholderEnd = 'End Date',
+  onStartInputChange = () => null,
+  onEndInputChange = () => null,
+  selectedStartDate,
+  selectedEndDate
+}) => {
+  const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : '');
+  const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : '');
+  useEffect(() => {
+    const startDate = formatDate(selectedStartDate);
+    const endDate = formatDate(selectedEndDate);
     startDate !== startValue && setStartValue(startDate);
     endDate !== endValue && setEndValue(endDate);
   }, [selectedStartDate, selectedEndDate]);
 
-  var handleOnChangeStart = function handleOnChangeStart(e) {
-    var newStartValue = e.target.value;
+  const handleOnChangeStart = e => {
+    const newStartValue = e.target.value;
     setStartValue(newStartValue);
   };
 
-  var handleOnChangeEnd = function handleOnChangeEnd(e) {
-    var newEndValue = e.target.value;
+  const handleOnChangeEnd = e => {
+    const newEndValue = e.target.value;
     setEndValue(newEndValue);
   };
 
-  var handleOnBlurStart = function handleOnBlurStart(e) {
-    var newStartValue = e.target.value;
+  const handleOnBlurStart = e => {
+    const newStartValue = e.target.value;
     onStartInputChange(moment(newStartValue));
   };
 
-  var handleOnBlurEnd = function handleOnBlurEnd(e) {
-    var newEndValue = e.target.value;
+  const handleOnBlurEnd = e => {
+    const newEndValue = e.target.value;
     onEndInputChange(moment(newEndValue));
   };
 
-  var handleOnKeyDownStart = function handleOnKeyDownStart(e) {
+  const handleOnKeyDownStart = e => {
     if (e.key === 'Enter') {
-      var newValue = e.target.value;
+      const newValue = e.target.value;
       onStartInputChange(moment(newValue));
       e.target.blur();
     }
   };
 
-  var handleOnKeyDownEnd = function handleOnKeyDownEnd(e) {
+  const handleOnKeyDownEnd = e => {
     if (e.key === 'Enter') {
-      var newValue = e.target.value;
+      const newValue = e.target.value;
       onEndInputChange(moment(newValue));
       e.target.blur();
     }
   };
 
-  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DSInputGroup, null, /*#__PURE__*/React.createElement(DSInputMask, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSInputMask, {
     "aria-label": placeholderStart || 'Date Picker Input Mask',
     mask: MASK_TYPES.DATE,
     onBlur: handleOnBlurStart,
@@ -92,7 +76,7 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref) {
     pipe: MASK_PIPES.AUTO_CORRECT_DATE,
     placeholder: placeholderStart,
     value: startValue
-  }), /*#__PURE__*/React.createElement(DSInputMask, {
+  }), /*#__PURE__*/_jsx(DSInputMask, {
     "aria-label": placeholderEnd || 'Date Picker Input Mask',
     mask: MASK_TYPES.DATE,
     onBlur: handleOnBlurEnd,
@@ -105,4 +89,3 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref) {
 };
 
 export { DatePickerRangeHeader as default };
-//# sourceMappingURL=DatePickerRangeHeader.js.map

package/esm/components/DayPickerRangeController.js

@@ -1,89 +1,53 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _toArray from '@babel/runtime/helpers/esm/toArray';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
+import { useRef, useEffect } from 'react';
 import { DayPickerRangeController as DayPickerRangeController$1 } from 'react-dates';
 import { DatePickerNavigation, DatePickerDay, renderMonthElement } from '@elliemae/ds-date-picker';
 import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-
-var _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
-
-var _convertPropToCssClas = convertPropToCssClassName('datepicker-range'),
-    classNameElement = _convertPropToCssClas.classNameElement,
-    classNameBlock = _convertPropToCssClas.classNameBlock;
-
-var DayPickerRangeController = function DayPickerRangeController(_ref) {
-  var _ref$endDate = _ref.endDate,
-      endDate = _ref$endDate === void 0 ? undefined : _ref$endDate,
-      _ref$startDate = _ref.startDate,
-      startDate = _ref$startDate === void 0 ? undefined : _ref$startDate,
-      _ref$displayFormatDay = _ref.displayFormatDay,
-      displayFormatDay = _ref$displayFormatDay === void 0 ? 'D' : _ref$displayFormatDay,
-      _ref$focusedInput = _ref.focusedInput,
-      focusedInput = _ref$focusedInput === void 0 ? undefined : _ref$focusedInput,
-      _ref$enableOutsideDay = _ref.enableOutsideDays,
-      enableOutsideDays = _ref$enableOutsideDay === void 0 ? false : _ref$enableOutsideDay,
-      _ref$onDatesChange = _ref.onDatesChange,
-      onDatesChange = _ref$onDatesChange === void 0 ? function () {
-    return null;
-  } : _ref$onDatesChange,
-      _ref$onFocusChange = _ref.onFocusChange,
-      onFocusChange = _ref$onFocusChange === void 0 ? function () {
-    return null;
-  } : _ref$onFocusChange,
-      _ref$onOutsideClick = _ref.onOutsideClick,
-      onOutsideClick = _ref$onOutsideClick === void 0 ? function () {
-    return null;
-  } : _ref$onOutsideClick,
-      _ref$isDayBlocked = _ref.isDayBlocked,
-      isDayBlocked = _ref$isDayBlocked === void 0 ? function () {
-    return null;
-  } : _ref$isDayBlocked,
-      _ref$isDayHighlighted = _ref.isDayHighlighted,
-      isDayHighlighted = _ref$isDayHighlighted === void 0 ? function () {
-    return null;
-  } : _ref$isDayHighlighted,
-      _ref$isOutsideRange = _ref.isOutsideRange,
-      isOutsideRange = _ref$isOutsideRange === void 0 ? function () {
-    return null;
-  } : _ref$isOutsideRange,
-      _ref$onNextMonthClick = _ref.onNextMonthClick,
-      onNextMonthClick = _ref$onNextMonthClick === void 0 ? function () {
-    return null;
-  } : _ref$onNextMonthClick,
-      _ref$onPrevMonthClick = _ref.onPrevMonthClick,
-      onPrevMonthClick = _ref$onPrevMonthClick === void 0 ? function () {
-    return null;
-  } : _ref$onPrevMonthClick,
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const {
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('datepicker-range');
+
+const DayPickerRangeController = _ref => {
+  let {
+    endDate = undefined,
+    startDate = undefined,
+    displayFormatDay = 'D',
+    focusedInput = undefined,
+    enableOutsideDays = false,
+    onDatesChange = () => null,
+    onFocusChange = () => null,
+    onOutsideClick = () => null,
+    isDayBlocked = () => null,
+    isDayHighlighted = () => null,
+    isOutsideRange = () => null,
+    onNextMonthClick = () => null,
+    onPrevMonthClick = () => null
+  } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var datePickerRef = useRef();
-  useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      var focusedElement = document.activeElement;
+  const datePickerRef = useRef();
+  useEffect(() => {
+    const handleMouseUp = () => {
+      const focusedElement = document.activeElement;
       focusedElement.blur();
     };
 
-    var handleKeyDown = function handleKeyDown(event) {
-      var _document$getElements = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay'),
-          _document$getElements2 = _toArray(_document$getElements),
-          firstDay = _document$getElements2[0],
-          restOfDays = _document$getElements2.slice(1);
-
-      var _restOfDays$slice = restOfDays.slice(-1),
-          _restOfDays$slice2 = _slicedToArray(_restOfDays$slice, 1),
-          lastDay = _restOfDays$slice2[0];
-
-      var focusedElement = document.activeElement;
-
-      var _document$getElements3 = document.getElementsByClassName('DayPickerNavigation_button'),
-          _document$getElements4 = _slicedToArray(_document$getElements3, 2),
-          prev = _document$getElements4[0],
-          next = _document$getElements4[1];
+    const handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const focusedElement = document.activeElement;
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
 
       switch (event.key) {
         case 'Home':
@@ -100,12 +64,12 @@ var DayPickerRangeController = function DayPickerRangeController(_ref) {
         case ' ':
           if (focusedElement === prev) {
             event.stopPropagation();
-            setTimeout(function () {
+            setTimeout(() => {
               prev.focus();
             }, 240);
           } else if (focusedElement === next) {
             event.stopPropagation();
-            setTimeout(function () {
+            setTimeout(() => {
               next === null || next === void 0 ? void 0 : next.focus();
             }, 240);
           }
@@ -124,64 +88,46 @@ var DayPickerRangeController = function DayPickerRangeController(_ref) {
 
     datePickerRef.current.addEventListener('mouseup', handleMouseUp, false);
     datePickerRef.current.addEventListener('keydown', handleKeyDown, false);
-    return function () {
+    return () => {
       if (datePickerRef.current) {
         datePickerRef.current.removeEventListener('mouseup', handleMouseUp, false);
         datePickerRef.current.removeEventListener('keydown', handleKeyDown, false);
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     ref: datePickerRef,
     className: classNameBlock('wrapper-day-picker-single-date-controller'),
-    "data-testid": otherProps['data-testid'] || 'date-range-picker-controller'
-  }, /*#__PURE__*/React.createElement(DayPickerRangeController$1, _extends({}, otherProps, {
-    isDayBlocked: isDayBlocked,
-    isDayHighlighted: isDayHighlighted,
-    isOutsideRange: isOutsideRange,
-    enableOutsideDays: enableOutsideDays,
-    endDate: endDate,
-    focused: true,
-    focusedInput: focusedInput,
-    hideKeyboardShortcutsPanel: true,
-    navNext: /*#__PURE__*/React.createElement(DatePickerNavigation, {
-      className: classNameElement('navigation-next')
-    }),
-    navPrev: /*#__PURE__*/React.createElement(DatePickerNavigation, {
-      className: classNameElement('navigation-prev'),
-      icon: ChevronLeft
-    }),
-    onDatesChange: onDatesChange,
-    onFocusChange: onFocusChange,
-    onOutsideClick: onOutsideClick,
-    onNextMonthClick: onNextMonthClick,
-    onPrevMonthClick: onPrevMonthClick,
-    renderDayContents: function renderDayContents(date) {
-      return /*#__PURE__*/React.createElement(DatePickerDay, {
+    "data-testid": otherProps['data-testid'] || 'date-range-picker-controller',
+    children: /*#__PURE__*/jsx(DayPickerRangeController$1, _objectSpread(_objectSpread({}, otherProps), {}, {
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange,
+      enableOutsideDays: enableOutsideDays,
+      endDate: endDate,
+      focused: true,
+      focusedInput: focusedInput,
+      hideKeyboardShortcutsPanel: true,
+      navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
+        className: classNameElement('navigation-next')
+      }),
+      navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
+        className: classNameElement('navigation-prev'),
+        icon: ChevronLeft
+      }),
+      onDatesChange: onDatesChange,
+      onFocusChange: onFocusChange,
+      onOutsideClick: onOutsideClick,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      renderDayContents: date => /*#__PURE__*/_jsx(DatePickerDay, {
         className: classNameElement('day-contents'),
         date: date.format(displayFormatDay)
-      });
-    },
-    renderMonthElement: renderMonthElement,
-    startDate: startDate
-  })));
-};
-
-DayPickerRangeController.propTypes = {
-  endDate: PropTypes.instanceOf(Date, moment),
-  startDate: PropTypes.instanceOf(Date, moment),
-  displayFormatDay: PropTypes.string,
-  focusedInput: PropTypes.bool,
-  onDatesChange: PropTypes.func,
-  onFocusChange: PropTypes.func,
-  onOutsideClick: PropTypes.func,
-  onNextMonthClick: PropTypes.func,
-  onPrevMonthClick: PropTypes.func,
-  enableOutsideDays: PropTypes.bool,
-  isDayBlocked: PropTypes.func,
-  isDayHighlighted: PropTypes.func,
-  isOutsideRange: PropTypes.func
+      }),
+      renderMonthElement: renderMonthElement,
+      startDate: startDate
+    }))
+  });
 };
 
 export { DayPickerRangeController as default };
-//# sourceMappingURL=DayPickerRangeController.js.map

package/esm/index.js

@@ -1,28 +1,3 @@
 export { DateRangePickerWithSchema, default } from './DSDateRangePicker.js';
 export { default as DayPickerRangeController } from './components/DayPickerRangeController.js';
 export { END_DATE, START_DATE } from './components/DSDateRangePickerImpl.js';
-import '@babel/runtime/helpers/esm/extends';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-classnames';
-import 'moment';
-import 'react-dates/initialize';
-import 'react-dates';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/toArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'prop-types';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-icons/ChevronLeft';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/assertThisInitialized';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-basic/form/InputMask';
-import '@elliemae/ds-basic/form/FormItem';
-import '@elliemae/ds-basic/Popper';
-import './isMaxDiffSafe.js';
-//# sourceMappingURL=index.js.map

package/esm/isMaxDiffSafe.js

@@ -1,11 +1,11 @@
 /* eslint-disable max-params */
-var MAX_YEARS_DIFF = 150; // https://jira.elliemae.io/browse/PUI-4145
+const MAX_YEARS_DIFF = 150; // https://jira.elliemae.io/browse/PUI-4145
 
-var isMaxDiffSafe = function isMaxDiffSafe(startDate, endDate, prevStart, prevEnd) {
+const isMaxDiffSafe = (startDate, endDate, prevStart, prevEnd) => {
   try {
-    var diff = Math.abs(endDate.diff(startDate, 'years'));
-    var diffStart = Math.abs(startDate.diff(prevStart, 'years'));
-    var diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));
+    const diff = Math.abs(endDate.diff(startDate, 'years'));
+    const diffStart = Math.abs(startDate.diff(prevStart, 'years'));
+    const diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));
     return diff < MAX_YEARS_DIFF && diffStart < MAX_YEARS_DIFF && diffEnd < MAX_YEARS_DIFF;
   } catch (error) {
     return true;
@@ -13,4 +13,3 @@ var isMaxDiffSafe = function isMaxDiffSafe(startDate, endDate, prevStart, prevEn
 };
 
 export { MAX_YEARS_DIFF, isMaxDiffSafe };
-//# sourceMappingURL=isMaxDiffSafe.js.map

package/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/package.json

@@ -1,14 +1,54 @@
 {
   "name": "@elliemae/ds-date-range-picker",
-  "version": "1.55.0-next.7",
+  "version": "2.0.0-alpha.10",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Date Range Picker",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "description": "ICE MT - Dimsum - Date Range Picker",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./isMaxDiffSafe": {
+      "import": "./esm/isMaxDiffSafe.js",
+      "require": "./cjs/isMaxDiffSafe.js"
+    },
+    "./DSDateRangePicker": {
+      "import": "./esm/DSDateRangePicker.js",
+      "require": "./cjs/DSDateRangePicker.js"
+    },
+    "./components/DSDateRangePickerImpl": {
+      "import": "./esm/components/DSDateRangePickerImpl.js",
+      "require": "./cjs/components/DSDateRangePickerImpl.js"
+    },
+    "./components/DayPickerRangeController": {
+      "import": "./esm/components/DayPickerRangeController.js",
+      "require": "./cjs/components/DayPickerRangeController.js"
+    },
+    "./components/DatePickerRangeHeader/DatePickerRangeHeader": {
+      "import": "./esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js",
+      "require": "./cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js"
+    },
+    "./components/DatePickerLabel/DatePickerLabel": {
+      "import": "./esm/components/DatePickerLabel/DatePickerLabel.js",
+      "require": "./cjs/components/DatePickerLabel/DatePickerLabel.js"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,21 +56,22 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "1.55.0-next.7",
-    "@elliemae/ds-classnames": "1.55.0-next.7",
-    "@elliemae/ds-date-picker": "1.55.0-next.7",
+    "@elliemae/ds-basic": "2.0.0-alpha.10",
+    "@elliemae/ds-classnames": "2.0.0-alpha.10",
+    "@elliemae/ds-date-picker": "2.0.0-alpha.10",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
     "react-dates": "~21.8.0",
     "react-text-mask": "~5.4.3"
   },
   "peerDependencies": {
-    "lodash": "^4.17.20",
-    "react": "~17.0.1",
-    "react-dom": "^17.0.1"
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSDateRangePicker.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+import moment from 'moment';
+import 'react-dates/initialize';
+import DayPickerRangeController from './components/DayPickerRangeController';
+import { START_DATE, END_DATE } from './components/DSDateRangePickerImpl';
+declare const DSDateRangePicker: {
+    ({ containerProps, className, disabled, required, startDateRequired, endDateRequired, id, hasError, validationMessage, readOnly, screenReaderInputMessage, initialVisibleMonth, firstDayOfWeek, keepOpenOnDateSelect, reopenPickerOnClearDates, hideKeyboardShortcutsPanel, onPrevMonthClick, onNextMonthClick, onClose, onOutsideClick, transitionDuration, verticalSpacing, minimumNights, isDayBlocked, isOutsideRange, isDayHighlighted, displayFormat, displayFormatDay, phrases, startDate, endDate, startDateId, endDateId, labelFrom, labelTo, enableOutsideDays, onChangeStartInput, onChangeEndInput, onDatesChange, }: {
+        containerProps?: {} | undefined;
+        className?: string | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        startDateRequired?: boolean | undefined;
+        endDateRequired?: boolean | undefined;
+        id: any;
+        hasError?: boolean | undefined;
+        validationMessage?: string | undefined;
+        readOnly?: boolean | undefined;
+        screenReaderInputMessage?: string | undefined;
+        initialVisibleMonth?: moment.Moment | undefined;
+        firstDayOfWeek?: number | undefined;
+        keepOpenOnDateSelect?: boolean | undefined;
+        reopenPickerOnClearDates?: boolean | undefined;
+        hideKeyboardShortcutsPanel?: boolean | undefined;
+        onPrevMonthClick?: (() => null) | undefined;
+        onNextMonthClick?: (() => null) | undefined;
+        onClose?: (() => null) | undefined;
+        onOutsideClick?: (() => null) | undefined;
+        transitionDuration?: number | undefined;
+        verticalSpacing?: number | undefined;
+        minimumNights?: number | undefined;
+        isDayBlocked?: (() => boolean) | undefined;
+        isOutsideRange?: (() => boolean) | undefined;
+        isDayHighlighted?: (() => boolean) | undefined;
+        displayFormat?: string | undefined;
+        displayFormatDay?: string | undefined;
+        phrases?: any;
+        startDate: any;
+        endDate: any;
+        startDateId?: string | undefined;
+        endDateId?: string | undefined;
+        labelFrom?: string | undefined;
+        labelTo?: string | undefined;
+        enableOutsideDays?: boolean | undefined;
+        onChangeStartInput?: (() => null) | undefined;
+        onChangeEndInput?: (() => null) | undefined;
+        onDatesChange?: (() => null) | undefined;
+    }): JSX.Element;
+    propTypes: {
+        containerProps: any;
+        className: any;
+        disabled: any;
+        required: any;
+        startDateRequired: any;
+        endDateRequired: any;
+        id: any;
+        hasError: any;
+        validationMessage: any;
+        readOnly: any;
+        screenReaderInputMessage: any;
+        initialVisibleMonth: any;
+        firstDayOfWeek: any;
+        keepOpenOnDateSelect: any;
+        reopenPickerOnClearDates: any;
+        hideKeyboardShortcutsPanel: any;
+        onPrevMonthClick: any;
+        onNextMonthClick: any;
+        onClose: any;
+        transitionDuration: any;
+        verticalSpacing: any;
+        isDayBlocked: any;
+        isOutsideRange: any;
+        isDayHighlighted: any;
+        minimumNights: number;
+        displayFormat: any;
+        displayFormatDay: any;
+        phrases: any;
+        startDate: any;
+        endDate: any;
+        startDateId: any;
+        endDateId: any;
+        labelFrom: any;
+        labelTo: any;
+        enableOutsideDays: any;
+        onDatesChange: any;
+        onChangeStartInput: any;
+        onChangeEndInput: any;
+        onOutsideClick: any;
+    };
+};
+declare const DateRangePickerWithSchema: any;
+export { DayPickerRangeController, START_DATE, END_DATE, DateRangePickerWithSchema, };
+export default DSDateRangePicker;

package/types/components/DSDateRangePickerImpl.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare const START_DATE = "startDate";
+export declare const END_DATE = "endDate";
+export default class DSDateRangePickerImpl extends React.Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDatesChange: ({ startDate, endDate }: {
+        startDate: any;
+        endDate: any;
+    }) => void;
+    onFocusChange: () => void;
+    handleKeyDown: (event: any) => void;
+    getSafeStartInputValue: () => any;
+    getSafeEndInputValue: () => any;
+    changeFocus: () => void;
+    handleChangeStart: (e: any) => void;
+    handleChangeEnd: (e: any) => void;
+    handleChangeDate: ({ startDate: _start, endDate }: {
+        startDate: any;
+        endDate: any;
+    }) => void;
+    render(): JSX.Element;
+}

package/types/components/DatePickerLabel/DatePickerLabel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Label: ({ className, label }: {
+    className?: string | undefined;
+    label?: string | undefined;
+}) => JSX.Element;
+export default Label;