@elliemae/ds-date-picker 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSDatePicker.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('react');
 var reactDesc = require('react-desc');
 require('react-dates/initialize');
@@ -32,50 +38,51 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
 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__default['default'](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; }
+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__default["default"](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 DSDatePicker = ({
-  containerProps = {},
-  id = '',
-  appendToBody = true,
-  className = '',
-  date,
-  value,
-  placeholder = '',
-  disabled = false,
-  required = false,
-  readOnly = false,
-  hasError = false,
-  screenReaderInputMessage = 'Select date',
-  enableOutsideDays = true,
-  initialVisibleMonth = moment__default['default'](),
-  firstDayOfWeek = 0,
-  keepOpenOnDateSelect = false,
-  hideKeyboardShortcutsPanel = true,
-  onChange = () => null,
-  onDateChange = undefined,
-  onPrevMonthClick = () => null,
-  onNextMonthClick = () => null,
-  onClose = () => null,
-  onFocus = () => null,
-  onBlur = () => null,
-  phrases = defaultPhrases.SingleDatePickerPhrases,
-  displayFormat = 'L',
-  displayFormatDay = 'D',
-  transitionDuration = 0,
-  verticalSpacing = 0,
-  isDayBlocked = () => false,
-  isOutsideRange = () => false,
-  isDayHighlighted = () => false,
-  numberOfMonths = 1,
-  openDirection = 'down',
-  tabIndex = '',
-  zIndex = 1,
-  pickerProps = {},
-  calendarProps = {},
-  autoClear = false,
-  focusCurrentDate = false
-}) => {
+const DSDatePicker = _ref => {
+  let {
+    containerProps = {},
+    id = '',
+    appendToBody = true,
+    className = '',
+    date,
+    value,
+    placeholder = '',
+    disabled = false,
+    required = false,
+    readOnly = false,
+    hasError = false,
+    screenReaderInputMessage = 'Select date',
+    enableOutsideDays = true,
+    initialVisibleMonth = moment__default["default"](),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = false,
+    hideKeyboardShortcutsPanel = true,
+    onChange = () => null,
+    onDateChange = undefined,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onFocus = () => null,
+    onBlur = () => null,
+    phrases = defaultPhrases.SingleDatePickerPhrases,
+    displayFormat = 'L',
+    displayFormatDay = 'D',
+    transitionDuration = 0,
+    verticalSpacing = 0,
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    numberOfMonths = 1,
+    openDirection = 'down',
+    tabIndex = '',
+    zIndex = 1,
+    pickerProps = {},
+    calendarProps = {},
+    autoClear = false,
+    focusCurrentDate = false
+  } = _ref;
   const {
     cssClassName
   } = dsClassnames.convertPropToCssClassName('datepicker', className, {
@@ -91,7 +98,7 @@ const DSDatePicker = ({
     style: {
       minWidth: '140px'
     },
-    children: /*#__PURE__*/_jsx__default['default'](DSDatePickerImpl, {
+    children: /*#__PURE__*/_jsx__default["default"](DSDatePickerImpl, {
       appendToBody: appendToBody,
       autoClear: autoClear,
       date: safeDate,
@@ -101,7 +108,7 @@ const DSDatePicker = ({
       enableOutsideDays: enableOutsideDays,
       firstDayOfWeek: firstDayOfWeek,
       hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
-      initialVisibleMonth: () => initialVisibleMonth ? moment__default['default'](initialVisibleMonth) : moment__default['default'](safeDate),
+      initialVisibleMonth: () => initialVisibleMonth ? moment__default["default"](initialVisibleMonth) : moment__default["default"](safeDate),
       isDayBlocked: isDayBlocked,
       isDayHighlighted: isDayHighlighted,
       isOutsideRange: isOutsideRange === true || isOutsideRange === false ? () => isOutsideRange : isOutsideRange,
@@ -110,8 +117,8 @@ const DSDatePicker = ({
       onBlur: onBlur,
       onClose: onClose,
       onChange: onChange,
-      onDateChange: (...args) => {
-        if (onDateChange) onDateChange(...args);
+      onDateChange: function () {
+        if (onDateChange) onDateChange(...arguments);
       },
       onFocus: onFocus,
       onNextMonthClick: onNextMonthClick,
@@ -139,8 +146,8 @@ const datePickerProps = {
   id: reactDesc.PropTypes.string.description('components id'),
   appendToBody: reactDesc.PropTypes.bool.description('append component to body or not').defaultValue(true),
   className: reactDesc.PropTypes.string.description('html class attribute'),
-  date: reactDesc.PropTypes.instanceOf(Date, moment__default['default']).description('selected date').defaultValue(undefined),
-  value: reactDesc.PropTypes.instanceOf(Date, moment__default['default']).description('value'),
+  date: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('selected date').defaultValue(undefined),
+  value: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('value'),
   placeholder: reactDesc.PropTypes.string.description('input placeholder value'),
   autoClear: reactDesc.PropTypes.bool.description('autoclears the input onblur if the date is not completely set').defaultValue(false),
   disabled: reactDesc.PropTypes.bool.description('disable component or not').defaultValue(false),
@@ -149,14 +156,11 @@ const datePickerProps = {
   hasError: reactDesc.PropTypes.bool.description('set error state').defaultValue(false),
   screenReaderInputMessage: reactDesc.PropTypes.string.description('message to anounce by screen reader').defaultValue('select date'),
   enableOutsideDays: reactDesc.PropTypes.bool.description('enable days oustide month or not').defaultValue(true),
-  initialVisibleMonth: reactDesc.PropTypes.instanceOf(Date, moment__default['default']).description('initial month to display'),
+  initialVisibleMonth: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('initial month to display'),
   firstDayOfWeek: reactDesc.PropTypes.number.description('first day of week').defaultValue(0),
   keepOpenOnDateSelect: reactDesc.PropTypes.bool.description('keep picker open when a date is selected').defaultValue(false),
   hideKeyboardShortcutsPanel: reactDesc.PropTypes.bool.description('hide keyabord shortcut panel or not').defaultValue(true),
-  onChange: reactDesc.PropTypes.func.description(`
-      function executed when input changes. This could trigger with invalid dates. It returns a string and a moment
-      if the date is valid.
-    `),
+  onChange: reactDesc.PropTypes.func.description("\n      function executed when input changes. This could trigger with invalid dates. It returns a string and a moment\n      if the date is valid.\n    "),
   onDateChange: reactDesc.PropTypes.func.description('function executed when date changes. This doesnt trigger with invalid dates. It returns a moment object'),
   onPrevMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on prev month button'),
   onNextMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on next month button'),
@@ -226,4 +230,4 @@ exports.SingleRangeDateSwitcher = SingleRangeDateSwitcher;
 exports.renderMonthElement = DatePickerRenderMonth.renderMonthElement;
 exports.DSDatePickerController = DatePickerController;
 exports.DatePickerWithSchema = DatePickerWithSchema;
-exports['default'] = DSDatePicker;
+exports["default"] = DSDatePicker;

package/cjs/components/DSDatePickerImpl.js

@@ -1,34 +1,31 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var moment = require('moment');
-var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
-var DSDateInput = require('@elliemae/ds-basic/form/DateInputV2');
+var dsForm = require('@elliemae/ds-form');
 var DatePickerController = require('./DatePickerController/DatePickerController.js');
 var DatePickerDropdown = require('./DatePickerDropdown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
 
 const FORMAT = 'MMDDYYYY';
-class DSdatePickerImpl extends React__default['default'].Component {
+class DSdatePickerImpl extends React__default["default"].Component {
   constructor(props) {
     super(props);
 
-    _defineProperty__default['default'](this, "onClickPicker", () => {
+    this.onClickPicker = () => {
       this.setState({
         inputFocused: true
       });
-    });
+    };
 
-    _defineProperty__default['default'](this, "getSafeValue", () => {
+    this.getSafeValue = () => {
       const {
         value,
         date,
@@ -39,15 +36,15 @@ class DSdatePickerImpl extends React__default['default'].Component {
       } = this.state;
 
       if (value) {
-        return moment__default['default'](value, FORMAT, true);
+        return moment__default["default"](value, FORMAT, true);
       }
 
       if (date) {
-        return moment__default['default'](date, FORMAT, true);
+        return moment__default["default"](date, FORMAT, true);
       }
 
       if (defaultValue) {
-        return moment__default['default'](defaultValue, FORMAT, true);
+        return moment__default["default"](defaultValue, FORMAT, true);
       }
 
       if (selectedDate) {
@@ -55,9 +52,9 @@ class DSdatePickerImpl extends React__default['default'].Component {
       }
 
       return null;
-    });
+    };
 
-    _defineProperty__default['default'](this, "getSafeInputValue", () => {
+    this.getSafeInputValue = () => {
       const safeValue = this.getSafeValue();
 
       if (safeValue && safeValue.isValid()) {
@@ -68,17 +65,17 @@ class DSdatePickerImpl extends React__default['default'].Component {
         dataInput
       } = this.state;
       return dataInput;
-    });
+    };
 
-    _defineProperty__default['default'](this, "isControlled", () => {
+    this.isControlled = () => {
       const {
         value,
         date
       } = this.props;
       return Boolean(value) || Boolean(date);
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleDateChange", (date, event) => {
+    this.handleDateChange = (date, event) => {
       const {
         readOnly,
         onDateChange,
@@ -105,9 +102,9 @@ class DSdatePickerImpl extends React__default['default'].Component {
           onBlur(date.format(FORMAT), date);
         }
       }
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleInputChange", (dataInput, newDate) => {
+    this.handleInputChange = (dataInput, newDate) => {
       const {
         onChange
       } = this.props;
@@ -117,30 +114,31 @@ class DSdatePickerImpl extends React__default['default'].Component {
       };
       this.setState(() => newState);
       onChange(dataInput, newDate);
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleChange", newDate => {
+    this.handleChange = newDate => {
       if (!newDate) return;
       const {
         onDateChange
       } = this.props;
-      const momentValue = moment__default['default'](newDate, FORMAT, true);
+      const momentValue = moment__default["default"](newDate, FORMAT, true);
       if (!momentValue.isValid()) return;
       this.setState({
         selectedDate: momentValue
       });
       onDateChange(momentValue);
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleFocus", ({
-      focused
-    }) => {
+    this.handleFocus = _ref => {
+      let {
+        focused
+      } = _ref;
       this.setState({
         inputFocused: focused
       });
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleCalendarClose", () => {
+    this.handleCalendarClose = () => {
       const {
         onClose
       } = this.props;
@@ -149,9 +147,9 @@ class DSdatePickerImpl extends React__default['default'].Component {
       });
       this.handleOnBlur();
       onClose();
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleClickEscape", () => {
+    this.handleClickEscape = () => {
       const {
         onClose
       } = this.props;
@@ -160,9 +158,9 @@ class DSdatePickerImpl extends React__default['default'].Component {
       });
       this.handleOnBlur();
       onClose();
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleOnBlur", () => {
+    this.handleOnBlur = () => {
       setTimeout(() => {
         const {
           onBlur,
@@ -173,7 +171,7 @@ class DSdatePickerImpl extends React__default['default'].Component {
           selectedDate
         } = this.state;
 
-        if (moment__default['default'](selectedDate, FORMAT, true).isValid()) {
+        if (moment__default["default"](selectedDate, FORMAT, true).isValid()) {
           onBlur(dataInput, selectedDate);
         } else {
           if (autoClear) {
@@ -185,17 +183,17 @@ class DSdatePickerImpl extends React__default['default'].Component {
           onBlur(dataInput, null);
         }
       });
-    });
+    };
 
-    _defineProperty__default['default'](this, "handleInputFocus", dataInput => {
+    this.handleInputFocus = dataInput => {
       const {
         onFocus
       } = this.props;
       onFocus(dataInput);
-    });
+    };
 
     this.state = {
-      pickerRef: /*#__PURE__*/React__default['default'].createRef(),
+      pickerRef: /*#__PURE__*/React__default["default"].createRef(),
       dataInput: '',
       selectedDate: null,
       inputFocused: false
@@ -211,8 +209,8 @@ class DSdatePickerImpl extends React__default['default'].Component {
       value: nextVal,
       date: nextDate
     } = nextProps;
-    const isPrevValMoment = prevVal instanceof moment__default['default'];
-    const isPrevDateMoment = prevDate instanceof moment__default['default'];
+    const isPrevValMoment = prevVal instanceof moment__default["default"];
+    const isPrevDateMoment = prevDate instanceof moment__default["default"];
     const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal; // if users wants to clear, we use '==' to catch both undefined AND null
 
     if (nextVal == null && nextDate == null) {
@@ -229,12 +227,12 @@ class DSdatePickerImpl extends React__default['default'].Component {
     }
 
     const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
-    const isNextValMoment = nextVal instanceof moment__default['default'];
-    const isNextDateMoment = nextDate instanceof moment__default['default'];
+    const isNextValMoment = nextVal instanceof moment__default["default"];
+    const isNextDateMoment = nextDate instanceof moment__default["default"];
     const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
-    const nextValAsMoment = isNextValMoment ? nextVal : moment__default['default'](nextVal);
+    const nextValAsMoment = isNextValMoment ? nextVal : moment__default["default"](nextVal);
     const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
-    const nextDateAsMoment = isNextDateMoment ? nextDate : moment__default['default'](nextDate);
+    const nextDateAsMoment = isNextDateMoment ? nextDate : moment__default["default"](nextDate);
     const hasValChanged = nextValAsString !== prevValAsString;
     const hasDateChanged = nextDateAsString !== prevDateAsString;
     const newState = {};
@@ -258,6 +256,8 @@ class DSdatePickerImpl extends React__default['default'].Component {
   }
 
   render() {
+    var _this = this;
+
     const {
       inputFocused
     } = this.state;
@@ -288,19 +288,19 @@ class DSdatePickerImpl extends React__default['default'].Component {
     const safedate = this.getSafeValue();
     const safeInputValue = this.getSafeInputValue();
     const hasSelectedDate = !!safedate;
-    return /*#__PURE__*/_jsx__default['default'](DSInputGroup__default['default'], {
-      rightAddon: /*#__PURE__*/_jsx__default['default'](DatePickerDropdown, {
+    return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+      rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
         pickerRef: this.state.pickerRef,
         disabled: disabled,
         isOpen: inputFocused,
-        menu: /*#__PURE__*/_jsx__default['default']("div", {
+        menu: /*#__PURE__*/_jsx__default["default"]("div", {
           style: {
             minHeight: '310px',
             zIndex: 1
           },
           className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
           "data-testid": "date-picker-portal-wrapper"
-        }, void 0, /*#__PURE__*/_jsx__default['default'](DatePickerController, {
+        }, void 0, /*#__PURE__*/_jsx__default["default"](DatePickerController, {
           date: safedate,
           displayFormatDay: displayFormatDay,
           enableOutsideDays: enableOutsideDays,
@@ -312,10 +312,11 @@ class DSdatePickerImpl extends React__default['default'].Component {
           keepOpenOnDateSelect: keepOpenOnDateSelect,
           numberOfMonths: numberOfMonths,
           onClickEscape: this.handleClickEscape,
-          onClose: (...args) => {
-            if (this.state.pickerRef.current) this.state.pickerRef.current.focus();
-            onClose(...args);
-            this.setState({
+          onClose: function () {
+            if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
+            onClose(...arguments);
+
+            _this.setState({
               inputFocused: false
             });
           },
@@ -334,7 +335,7 @@ class DSdatePickerImpl extends React__default['default'].Component {
         zIndex: zIndex,
         pickerProps: pickerProps
       })
-    }, void 0, /*#__PURE__*/_jsx__default['default'](DSDateInput.DSDateInputV2, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
       "data-testid": "datepicker-input",
       "aria-label": placeholder || 'Date Picker Input',
       disabled: disabled,