@elliemae/ds-date-picker 1.61.0 → 2.0.0-alpha.12

package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -1,55 +1,40 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef, useEffect } from 'react';
 import moment from 'moment';
 import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
-var blockname = 'date-range-picker';
-var DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
+const blockname = 'date-range-picker';
+const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
 // the year for the range, because they must type 4 numbers for the year
 // to be higher than 999
 
-var MAGIC_NUMBER = 999;
-var Header = aggregatedClasses('div')(blockname, 'header', function (_ref) {
-  var invalidDate = _ref.invalidDate;
+const MAGIC_NUMBER = 999;
+const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
+  let {
+    invalidDate
+  } = _ref;
   return {
-    invalidDate: invalidDate
+    invalidDate
   };
 });
 
-var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
-  var _ref2$onStartInputCha = _ref2.onStartInputChange,
-      onStartInputChange = _ref2$onStartInputCha === void 0 ? function () {
-    return null;
-  } : _ref2$onStartInputCha,
-      _ref2$onEndInputChang = _ref2.onEndInputChange,
-      onEndInputChange = _ref2$onEndInputChang === void 0 ? function () {
-    return null;
-  } : _ref2$onEndInputChang,
-      _ref2$onFocusChange = _ref2.onFocusChange,
-      onFocusChange = _ref2$onFocusChange === void 0 ? function () {
-    return null;
-  } : _ref2$onFocusChange,
-      selectedStartDate = _ref2.selectedStartDate,
-      selectedEndDate = _ref2.selectedEndDate,
-      handleDatesChange = _ref2.handleDatesChange,
-      _ref2$autoJumpOnEdit = _ref2.autoJumpOnEdit,
-      autoJumpOnEdit = _ref2$autoJumpOnEdit === void 0 ? true : _ref2$autoJumpOnEdit;
-
-  var _useState = useState(selectedStartDate),
-      _useState2 = _slicedToArray(_useState, 2),
-      startValue = _useState2[0],
-      setStartValue = _useState2[1];
-
-  var _useState3 = useState(selectedEndDate),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endValue = _useState4[0],
-      setEndValue = _useState4[1];
-
-  var startInputRef = useRef();
-  var endInputRef = useRef();
-  useEffect(function () {
+const DatePickerRangeHeader = _ref2 => {
+  let {
+    onStartInputChange = () => null,
+    onEndInputChange = () => null,
+    onFocusChange = () => null,
+    selectedStartDate,
+    selectedEndDate,
+    handleDatesChange,
+    autoJumpOnEdit = true
+  } = _ref2;
+  const [startValue, setStartValue] = useState(selectedStartDate);
+  const [endValue, setEndValue] = useState(selectedEndDate);
+  const startInputRef = useRef();
+  const endInputRef = useRef();
+  useEffect(() => {
     if (selectedStartDate) {
       setStartValue(selectedStartDate.format(DATE_FORMAT));
     }
@@ -59,27 +44,25 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
     }
   }, [selectedStartDate, selectedEndDate]);
 
-  var isValidRangeDate = function isValidRangeDate(start, end) {
-    var isValidRange = false;
+  const isValidRangeDate = (start, end) => {
+    let isValidRange = false;
 
     if (start && end) {
-      var momentStart = moment(start, DATE_FORMAT);
-      var momentEnd = moment(end, DATE_FORMAT);
+      const momentStart = moment(start, DATE_FORMAT);
+      const momentEnd = moment(end, DATE_FORMAT);
       isValidRange = momentStart.isBefore(momentEnd);
     }
 
     return isValidRange;
   };
 
-  var handleOnFocus = function handleOnFocus(inputType) {
-    return onFocusChange(inputType);
-  };
+  const handleOnFocus = inputType => onFocusChange(inputType);
 
-  var handleOnChangeStart = function handleOnChangeStart(newStartValue) {
+  const handleOnChangeStart = newStartValue => {
     var _endInputRef$current, _endInputRef$current$;
 
-    var y = newStartValue.substring(4);
-    var momentValue = moment(newStartValue, DATE_FORMAT);
+    const y = newStartValue.substring(4);
+    const momentValue = moment(newStartValue, DATE_FORMAT);
 
     if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
       onStartInputChange(momentValue);
@@ -92,8 +75,8 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
     }
   };
 
-  var handleOnChangeEnd = function handleOnChangeEnd(newEndValue) {
-    var momentValue = moment(newEndValue, DATE_FORMAT);
+  const handleOnChangeEnd = newEndValue => {
+    const momentValue = moment(newEndValue, DATE_FORMAT);
 
     if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
       onEndInputChange(momentValue);
@@ -102,10 +85,10 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
     setEndValue(newEndValue);
   };
 
-  var handleOnKeyDownStart = function handleOnKeyDownStart(e) {
-    var isValid = isValidRangeDate(startValue, endValue);
-    var momentStart = moment(startValue, DATE_FORMAT);
-    var momentEnd = moment(endValue, DATE_FORMAT);
+  const handleOnKeyDownStart = e => {
+    const isValid = isValidRangeDate(startValue, endValue);
+    const momentStart = moment(startValue, DATE_FORMAT);
+    const momentEnd = moment(endValue, DATE_FORMAT);
 
     if (e.key === 'Enter' && startValue) {
       onStartInputChange(momentStart);
@@ -116,10 +99,10 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
     }
   };
 
-  var handleOnKeyDownEnd = function handleOnKeyDownEnd(e) {
-    var isValid = isValidRangeDate(startValue, endValue);
-    var momentStart = moment(startValue, DATE_FORMAT);
-    var momentEnd = moment(endValue, DATE_FORMAT);
+  const handleOnKeyDownEnd = e => {
+    const isValid = isValidRangeDate(startValue, endValue);
+    const momentStart = moment(startValue, DATE_FORMAT);
+    const momentEnd = moment(endValue, DATE_FORMAT);
 
     if (e.key === 'Enter' && isValid) {
       handleDatesChange({
@@ -130,40 +113,25 @@ var DatePickerRangeHeader = function DatePickerRangeHeader(_ref2) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DSInputGroup, null, /*#__PURE__*/React.createElement(DSDateInputV2, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'start-date'
     },
     innerRef: startInputRef,
     onChange: handleOnChangeStart,
-    onFocus: function onFocus() {
-      return handleOnFocus('startDate');
-    },
+    onFocus: () => handleOnFocus('startDate'),
     onKeyDown: handleOnKeyDownStart,
     value: startValue
-  }), /*#__PURE__*/React.createElement(DSDateInputV2, {
+  }), /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'end-date'
     },
     innerRef: endInputRef,
     onChange: handleOnChangeEnd,
-    onFocus: function onFocus() {
-      return handleOnFocus('endDate');
-    },
+    onFocus: () => handleOnFocus('endDate'),
     onKeyDown: handleOnKeyDownEnd,
     value: endValue
   })));
 };
 
-DatePickerRangeHeader.propTypes = {
-  onStartInputChange: PropTypes.func,
-  onEndInputChange: PropTypes.func,
-  onFocusChange: PropTypes.func,
-  selectedStartDate: PropTypes.any,
-  selectedEndDate: PropTypes.any,
-  handleDatesChange: PropTypes.func,
-  autoJumpOnEdit: PropTypes.bool
-};
-
 export { DatePickerRangeHeader as default };
-//# sourceMappingURL=DatePickerRangeHeader.js.map

package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js

@@ -1,40 +1,38 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { ChevronDoubleLeft, ChevronDoubleRight } from '@elliemae/ds-icons';
 import { Grid } from '@elliemae/ds-grid';
 
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-var renderMonthElement = function renderMonthElement(_ref) {
-  var month = _ref.month,
-      onYearSelect = _ref.onYearSelect;
-  return /*#__PURE__*/React.createElement(Grid, {
+var _ChevronDoubleLeft, _ChevronDoubleRight;
+const renderMonthElement = _ref => {
+  let {
+    month,
+    onYearSelect
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
     height: "20px",
     cols: ['auto', 1, 'auto'],
     alignItems: "flex-end",
     mr: "10px"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
     role: "button",
     tabIndex: "0",
     "data-testid": "date-picker-prev-year-arrow",
-    onClick: function onClick() {
-      return onYearSelect(month, month.year() - 1);
-    }
-  }, /*#__PURE__*/React.createElement(ChevronDoubleLeft, {
+    onClick: () => onYearSelect(month, month.year() - 1)
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
     width: 13.6,
     height: 13.6
-  }))), /*#__PURE__*/React.createElement(Grid, {
+  })))), /*#__PURE__*/_jsx(Grid, {
     "data-testid": "date-picker-header"
-  }, /*#__PURE__*/React.createElement("strong", null, month.format('MMMM YYYY'))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
     role: "button",
     tabIndex: "0",
     "data-testid": "date-picker-next-year-arrow",
-    onClick: function onClick() {
-      return onYearSelect(month, month.year() + 1);
-    }
-  }, /*#__PURE__*/React.createElement(ChevronDoubleRight, {
+    onClick: () => onYearSelect(month, month.year() + 1)
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
     width: 13.6,
     height: 13.6
-  }))));
+  })))));
 };
 
 export { renderMonthElement };
-//# sourceMappingURL=DatePickerRenderMonth.js.map

package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js

@@ -1,6 +1,7 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useState, useRef } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef } from 'react';
 import { DayPickerSingleDateController } from 'react-dates';
 import moment from 'moment';
 import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
@@ -8,92 +9,69 @@ import { ChevronLeft } from '@elliemae/ds-icons';
 import Day from '../DatePickerDay/DatePickerDay.js';
 import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
 import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
-import 'prop-types';
-import '@elliemae/ds-icon';
-import '../../prop-types-578e866b.js';
-import '@elliemae/ds-form';
+import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
-var blockname = 'single-date';
-var Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
+const _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
+const blockname = 'single-date';
+const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
+const {
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('datepicker');
 
-var _convertPropToCssClas = convertPropToCssClassName('datepicker'),
-    classNameElement = _convertPropToCssClas.classNameElement,
-    classNameBlock = _convertPropToCssClas.classNameBlock;
-
-var DatePickerSingleDate = function DatePickerSingleDate(_ref) {
-  var date = _ref.date,
-      _ref$displayFormatDay = _ref.displayFormatDay,
-      displayFormatDay = _ref$displayFormatDay === void 0 ? 'D' : _ref$displayFormatDay,
-      _ref$isDayHighlighted = _ref.isDayHighlighted,
-      isDayHighlighted = _ref$isDayHighlighted === void 0 ? function () {
-    return false;
-  } : _ref$isDayHighlighted,
-      _ref$enableOutsideDay = _ref.enableOutsideDays,
-      enableOutsideDays = _ref$enableOutsideDay === void 0 ? true : _ref$enableOutsideDay,
-      _ref$showHeader = _ref.showHeader,
-      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
+const DatePickerSingleDate = _ref => {
+  let {
+    date,
+    displayFormatDay = 'D',
+    isDayHighlighted = () => false,
+    enableOutsideDays = true,
+    showHeader = true,
+    onChange = () => null
+  } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(date),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedDate = _useState2[0],
-      setSelectedDate = _useState2[1];
-
-  var _useState3 = useState(moment()),
-      _useState4 = _slicedToArray(_useState3, 2),
-      key = _useState4[0],
-      setKey = _useState4[1];
-
-  var datePickerRef = useRef();
+  const [selectedDate, setSelectedDate] = useState(date);
+  const [key, setKey] = useState(moment());
+  const datePickerRef = useRef();
 
-  var updateKeyDate = function updateKeyDate(newDate) {
+  const updateKeyDate = newDate => {
     setKey(newDate);
   };
 
-  var handleDateChange = function handleDateChange(newDate) {
+  const handleDateChange = newDate => {
     setSelectedDate(newDate);
-    setTimeout(function () {
-      return onChange(newDate);
-    }, 500);
+    setTimeout(() => onChange(newDate), 500);
   };
 
-  return /*#__PURE__*/React.createElement(Wrapper, null, showHeader && /*#__PURE__*/React.createElement(DatePickerHeader, {
+  return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerHeader, {
     onInputChange: handleDateChange,
     selectedDate: selectedDate,
     updateKeyDate: updateKeyDate
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/jsx("div", {
     ref: datePickerRef,
     className: classNameBlock('wrapper-day-picker-single-date-controller'),
-    "data-testid": rest['data-testid'] || 'date-picker-single-date'
-  }, /*#__PURE__*/React.createElement(DayPickerSingleDateController, {
-    key: key,
-    date: selectedDate,
-    enableOutsideDays: enableOutsideDays,
-    focused: true,
-    hideKeyboardShortcutsPanel: true,
-    isDayHighlighted: isDayHighlighted,
-    keepOpenOnDateSelect: true,
-    navNext: /*#__PURE__*/React.createElement(Navigation, {
-      className: classNameElement('navigation-next')
-    }),
-    navPrev: /*#__PURE__*/React.createElement(Navigation, {
-      className: classNameElement('navigation-prev'),
-      icon: ChevronLeft
-    }),
-    onDateChange: handleDateChange,
-    renderDayContents: function renderDayContents(givenDate) {
-      return /*#__PURE__*/React.createElement(Day, {
+    "data-testid": rest['data-testid'] || 'date-picker-single-date',
+    children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
+      date: selectedDate,
+      enableOutsideDays: enableOutsideDays,
+      focused: true,
+      hideKeyboardShortcutsPanel: true,
+      isDayHighlighted: isDayHighlighted,
+      keepOpenOnDateSelect: true,
+      navNext: /*#__PURE__*/_jsx(Navigation, {
+        className: classNameElement('navigation-next')
+      }),
+      navPrev: /*#__PURE__*/_jsx(Navigation, {
+        className: classNameElement('navigation-prev'),
+        icon: ChevronLeft
+      }),
+      onDateChange: handleDateChange,
+      renderDayContents: givenDate => /*#__PURE__*/_jsx(Day, {
         className: classNameElement('day-contents'),
         date: givenDate.format(displayFormatDay)
-      });
-    }
-  })));
+      })
+    }, key)
+  }));
 };
 
 export { DatePickerSingleDate as default };
-//# sourceMappingURL=DatePickerSingleDate.js.map

package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js

@@ -1,35 +1,36 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { DSCheckbox } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
 import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'prop-types';
-import 'moment';
 
-/* eslint-disable react/prop-types */
-var blockname = 'date-switcher';
-var Header = aggregatedClasses('div')(blockname, 'header');
+const blockname = 'date-switcher';
+const Header = aggregatedClasses('div')(blockname, 'header');
 
-var SingleRangeDateSwitcher = function SingleRangeDateSwitcher(_ref) {
-  var onStartInputChange = _ref.onStartInputChange,
-      onEndInputChange = _ref.onEndInputChange,
-      onSingleInputChange = _ref.onSingleInputChange,
-      onFocusChange = _ref.onFocusChange,
-      selectedStartDate = _ref.selectedStartDate,
-      selectedEndDate = _ref.selectedEndDate,
-      selectedSingleDate = _ref.selectedSingleDate,
-      isDateRange = _ref.isDateRange,
-      setIsDateRange = _ref.setIsDateRange,
-      handleDatesChange = _ref.handleDatesChange,
-      updateKeyDate = _ref.updateKeyDate,
-      focusedInput = _ref.focusedInput;
-  var SingleDateInput = /*#__PURE__*/React.createElement(DatePickerHeader, {
+const SingleRangeDateSwitcher = _ref => {
+  let {
+    onStartInputChange,
+    onEndInputChange,
+    onSingleInputChange,
+    onFocusChange,
+    selectedStartDate,
+    selectedEndDate,
+    selectedSingleDate,
+    isDateRange,
+    setIsDateRange,
+    handleDatesChange,
+    updateKeyDate,
+    focusedInput
+  } = _ref;
+
+  const SingleDateInput = /*#__PURE__*/_jsx(DatePickerHeader, {
     onInputChange: onSingleInputChange,
     selectedDate: selectedSingleDate,
     updateKeyDate: updateKeyDate
   });
-  var DateRangeInput = /*#__PURE__*/React.createElement(DatePickerRangeHeader, {
+
+  const DateRangeInput = /*#__PURE__*/_jsx(DatePickerRangeHeader, {
     focusedInput: focusedInput,
     onFocusChange: onFocusChange,
     onEndInputChange: onEndInputChange,
@@ -38,9 +39,10 @@ var SingleRangeDateSwitcher = function SingleRangeDateSwitcher(_ref) {
     selectedStartDate: selectedStartDate,
     handleDatesChange: handleDatesChange
   });
-  return /*#__PURE__*/React.createElement(Header, {
+
+  return /*#__PURE__*/_jsx(Header, {
     "data-testid": "date-switch-header"
-  }, /*#__PURE__*/React.createElement(DSCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
     checked: isDateRange,
     className: "switch-header__checkbox",
     labelText: "Range",
@@ -49,4 +51,3 @@ var SingleRangeDateSwitcher = function SingleRangeDateSwitcher(_ref) {
 };
 
 export { SingleRangeDateSwitcher as default };
-//# sourceMappingURL=SingleRangeDateSwitcher.js.map

package/esm/components/index.js

@@ -8,19 +8,3 @@ export { default as DatePickerRange } from './DatePickerRange/DatePickerRange.js
 export { default as DatePickerRangeHeader } from './DatePickerRangeHeader/DatePickerRangeHeader.js';
 export { default as SingleRangeDateSwitcher } from './SingleRangeDateSwitcher/SingleRangeDateSwitcher.js';
 export { renderMonthElement } from './DatePickerRenderMonth/DatePickerRenderMonth.js';
-import 'react';
-import 'prop-types';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-icon';
-import '../prop-types-578e866b.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@elliemae/ds-button';
-import '@babel/runtime/helpers/esm/extends';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-popper';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-dates';
-import 'moment';
-import '@elliemae/ds-form';
-import '@elliemae/ds-grid';
-//# sourceMappingURL=index.js.map