@elliemae/ds-date-picker 2.0.0-next.7 → 2.0.0-rc.10

package/esm/components/DSDatePickerImpl.js

@@ -1,10 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import moment from 'moment';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
-import { DSDateInputV2 } from '@elliemae/ds-basic/form/DateInputV2';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import DSDatePickerController from './DatePickerController/DatePickerController.js';
 import DatePickerDropdown from './DatePickerDropdown.js';
 
@@ -13,13 +11,13 @@ class DSdatePickerImpl extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "onClickPicker", () => {
+    this.onClickPicker = () => {
       this.setState({
         inputFocused: true
       });
-    });
+    };
 
-    _defineProperty(this, "getSafeValue", () => {
+    this.getSafeValue = () => {
       const {
         value,
         date,
@@ -46,9 +44,9 @@ class DSdatePickerImpl extends React.Component {
       }
 
       return null;
-    });
+    };
 
-    _defineProperty(this, "getSafeInputValue", () => {
+    this.getSafeInputValue = () => {
       const safeValue = this.getSafeValue();
 
       if (safeValue && safeValue.isValid()) {
@@ -59,17 +57,17 @@ class DSdatePickerImpl extends React.Component {
         dataInput
       } = this.state;
       return dataInput;
-    });
+    };
 
-    _defineProperty(this, "isControlled", () => {
+    this.isControlled = () => {
       const {
         value,
         date
       } = this.props;
       return Boolean(value) || Boolean(date);
-    });
+    };
 
-    _defineProperty(this, "handleDateChange", (date, event) => {
+    this.handleDateChange = (date, event) => {
       const {
         readOnly,
         onDateChange,
@@ -96,9 +94,9 @@ class DSdatePickerImpl extends React.Component {
           onBlur(date.format(FORMAT), date);
         }
       }
-    });
+    };
 
-    _defineProperty(this, "handleInputChange", (dataInput, newDate) => {
+    this.handleInputChange = (dataInput, newDate) => {
       const {
         onChange
       } = this.props;
@@ -108,9 +106,9 @@ class DSdatePickerImpl extends React.Component {
       };
       this.setState(() => newState);
       onChange(dataInput, newDate);
-    });
+    };
 
-    _defineProperty(this, "handleChange", newDate => {
+    this.handleChange = newDate => {
       if (!newDate) return;
       const {
         onDateChange
@@ -121,17 +119,18 @@ class DSdatePickerImpl extends React.Component {
         selectedDate: momentValue
       });
       onDateChange(momentValue);
-    });
+    };
 
-    _defineProperty(this, "handleFocus", ({
-      focused
-    }) => {
+    this.handleFocus = _ref => {
+      let {
+        focused
+      } = _ref;
       this.setState({
         inputFocused: focused
       });
-    });
+    };
 
-    _defineProperty(this, "handleCalendarClose", () => {
+    this.handleCalendarClose = () => {
       const {
         onClose
       } = this.props;
@@ -140,9 +139,9 @@ class DSdatePickerImpl extends React.Component {
       });
       this.handleOnBlur();
       onClose();
-    });
+    };
 
-    _defineProperty(this, "handleClickEscape", () => {
+    this.handleClickEscape = () => {
       const {
         onClose
       } = this.props;
@@ -151,9 +150,9 @@ class DSdatePickerImpl extends React.Component {
       });
       this.handleOnBlur();
       onClose();
-    });
+    };
 
-    _defineProperty(this, "handleOnBlur", () => {
+    this.handleOnBlur = () => {
       setTimeout(() => {
         const {
           onBlur,
@@ -176,14 +175,14 @@ class DSdatePickerImpl extends React.Component {
           onBlur(dataInput, null);
         }
       });
-    });
+    };
 
-    _defineProperty(this, "handleInputFocus", dataInput => {
+    this.handleInputFocus = dataInput => {
       const {
         onFocus
       } = this.props;
       onFocus(dataInput);
-    });
+    };
 
     this.state = {
       pickerRef: /*#__PURE__*/React.createRef(),
@@ -249,6 +248,8 @@ class DSdatePickerImpl extends React.Component {
   }
 
   render() {
+    var _this = this;
+
     const {
       inputFocused
     } = this.state;
@@ -303,10 +304,11 @@ class DSdatePickerImpl extends React.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
             });
           },

package/esm/components/DatePickerController/DatePickerController.js

@@ -1,6 +1,11 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
@@ -8,7 +13,7 @@ import moment from 'moment';
 import 'react-dates/initialize';
 import { DayPickerSingleDateController } from 'react-dates';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
+import { ChevronLeft } from '@elliemae/ds-icons';
 import { SingleDatePickerPhrases } from '../../defaultPhrases.js';
 import { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth.js';
 import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
@@ -44,14 +49,14 @@ class DSDatePickerController extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "handleMouseUp", () => {
+    this.handleMouseUp = () => {
       var _focusedElement$blur;
 
       const focusedElement = document.activeElement;
       focusedElement === null || focusedElement === void 0 ? void 0 : (_focusedElement$blur = focusedElement.blur) === null || _focusedElement$blur === void 0 ? void 0 : _focusedElement$blur.call(focusedElement);
-    });
+    };
 
-    _defineProperty(this, "handleKeyDown", event => {
+    this.handleKeyDown = event => {
       const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
       const [lastDay] = restOfDays.slice(-1);
       const {
@@ -71,9 +76,9 @@ class DSDatePickerController extends React.Component {
           onClickEscape();
           break;
       }
-    });
+    };
 
-    _defineProperty(this, "getSafeValue", () => {
+    this.getSafeValue = () => {
       const {
         value,
         date,
@@ -87,17 +92,17 @@ class DSDatePickerController extends React.Component {
       if (defaultValue) return moment(defaultValue);
       if (selectedDate) return moment(selectedDate);
       return null;
-    });
+    };
 
-    _defineProperty(this, "isControlled", () => {
+    this.isControlled = () => {
       const {
         value,
         date
       } = this.props;
       return Boolean(value) || Boolean(date);
-    });
+    };
 
-    _defineProperty(this, "handleDateChange", date => {
+    this.handleDateChange = date => {
       const {
         readOnly,
         onDateChange,
@@ -114,9 +119,9 @@ class DSDatePickerController extends React.Component {
         onDateChange(date);
         onChange(date);
       }
-    });
+    };
 
-    _defineProperty(this, "handleChange", dataInput => {
+    this.handleChange = dataInput => {
       const {
         onDateChange,
         onChange
@@ -127,9 +132,9 @@ class DSDatePickerController extends React.Component {
       });
       onDateChange(momentvalue);
       onChange(momentvalue);
-    });
+    };
 
-    _defineProperty(this, "handleNavClick", (date, nav) => {
+    this.handleNavClick = (date, nav) => {
       const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
       const {
         onPrevMonthClick,
@@ -147,9 +152,9 @@ class DSDatePickerController extends React.Component {
         next === null || next === void 0 ? void 0 : (_next$focus = next.focus) === null || _next$focus === void 0 ? void 0 : _next$focus.call(next);
         onNextMonthClick(date);
       }
-    });
+    };
 
-    _defineProperty(this, "insideBlur", event => {
+    this.insideBlur = event => {
       const {
         datePicker
       } = this.state;
@@ -157,7 +162,7 @@ class DSDatePickerController extends React.Component {
       if (!datePicker.current.contains(event.currentTarget)) {
         this.props.onClose();
       }
-    });
+    };
 
     this.state = {
       selectedDate: null,
@@ -264,8 +269,7 @@ class DSDatePickerController extends React.Component {
   }
 
 }
-
-_defineProperty(DSDatePickerController, "defaultProps", {
+DSDatePickerController.defaultProps = {
   date: '',
   value: '',
   enableOutsideDays: false,
@@ -288,8 +292,7 @@ _defineProperty(DSDatePickerController, "defaultProps", {
   isOutsideRange: () => false,
   isDayHighlighted: () => false,
   numberOfMonths: 1
-});
-
+};
 DSDatePickerController.defaultProps = {
   date: '',
   value: '',

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -1,15 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 
-const Day = ({
-  className = 'date-picker-content-day',
-  date = ''
-}) => /*#__PURE__*/_jsx("div", {
-  className: className,
-  "data-testid": "datepicker-day-".concat(date)
-}, void 0, /*#__PURE__*/_jsx("div", {
-  className: "".concat(className, "-half"),
-  "data-testid": "datepicker-day"
-}, void 0, date));
+const Day = _ref => {
+  let {
+    className = 'date-picker-content-day',
+    date = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    "data-testid": "datepicker-day-".concat(date)
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    className: "".concat(className, "-half"),
+    "data-testid": "datepicker-day"
+  }, void 0, date));
+};
 
 export { Day as default };

package/esm/components/DatePickerDropdown.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import DSPopper from '@elliemae/ds-basic/Popper';
+import DSPopper from '@elliemae/ds-popper';
 import { Picker } from './DatePickerPicker/DatePickerPicker.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -15,16 +20,17 @@ const {
 
 const noop = () => null;
 
-function DatePickerDropdown({
-  disabled = false,
-  readOnly,
-  onClick = noop,
-  isOpen,
-  menu,
-  zIndex = 1,
-  pickerProps,
-  pickerRef
-}) {
+function DatePickerDropdown(_ref) {
+  let {
+    disabled = false,
+    readOnly,
+    onClick = noop,
+    isOpen,
+    menu,
+    zIndex = 1,
+    pickerProps,
+    pickerRef
+  } = _ref;
   return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: menu,
     isOpen: isOpen,

package/esm/components/DatePickerHeader/DatePickerHeader.js

@@ -2,8 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import moment from 'moment';
-import DSDateInput from '@elliemae/ds-basic/form/DateInputV2';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const DATE_FORMAT = 'MMDDYYYY';
@@ -12,11 +11,12 @@ const Header = aggregatedClasses('div')(blockname);
 
 const isFn = variable => typeof variable === 'function';
 
-const DatePickerHeader = ({
-  onInputChange = () => null,
-  selectedDate,
-  updateKeyDate
-}) => {
+const DatePickerHeader = _ref => {
+  let {
+    onInputChange = () => null,
+    selectedDate,
+    updateKeyDate
+  } = _ref;
   const [value, setValue] = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
   useEffect(() => {
     if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
@@ -36,7 +36,7 @@ const DatePickerHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInput, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     value: value,

package/esm/components/DatePickerNavigation/DatePickerNavigation.js

@@ -3,20 +3,23 @@ import 'react';
 import ChevronRight from '@elliemae/ds-icons/ChevronRight';
 import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
 
-const Navigation = ({
-  className = 'date-picker-navigation',
-  icon: Icon = ChevronRight,
-  color = DSIconColors.NEUTRAL,
-  size = DSIconSizes.S,
-  innerRef
-}) => /*#__PURE__*/_jsx("div", {
-  tabIndex: 0,
-  "data-testid": "date-picker-nav"
-}, void 0, /*#__PURE__*/_jsx(Icon, {
-  className: className,
-  color: color,
-  innerRef: innerRef,
-  size: size
-}));
+const Navigation = _ref => {
+  let {
+    className = 'date-picker-navigation',
+    icon: Icon = ChevronRight,
+    color = DSIconColors.NEUTRAL,
+    size = DSIconSizes.S,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    tabIndex: 0,
+    "data-testid": "date-picker-nav"
+  }, void 0, /*#__PURE__*/_jsx(Icon, {
+    className: className,
+    color: color,
+    innerRef: innerRef,
+    size: size
+  }));
+};
 
 export { Navigation as default };

package/esm/components/DatePickerPicker/DatePickerPicker.js

@@ -4,7 +4,7 @@ import 'react';
 import PropTypes from 'prop-types';
 import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
 import DatePicker from '@elliemae/ds-icons/DatePicker';
-import DSButton, { buttonTypes } from '@elliemae/ds-basic/Button';
+import DSButton, { buttonTypes } from '@elliemae/ds-button';
 import { iconSizes } from '@elliemae/ds-shared/prop-types';
 
 var _DatePicker;

package/esm/components/DatePickerRange/DatePickerRange.js

@@ -1,12 +1,19 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef } from 'react';
 import { DayPickerRangeController } from 'react-dates';
 import moment from 'moment';
-import { DatePickerRangeHeader, DatePickerNavigation, DatePickerDay } from '@elliemae/ds-date-picker';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
 import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import Day from '../DatePickerDay/DatePickerDay.js';
+import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
+import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
 import { jsx } from 'react/jsx-runtime';
 
 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; }
@@ -21,13 +28,14 @@ const {
 const START_DATE = 'startDate';
 const END_DATE = 'endDate';
 
-const DatePickerRangeDate = ({
-  dateStart,
-  dateEnd,
-  displayFormatDay = 'D',
-  showHeader = true,
-  otherProps
-}) => {
+const DatePickerRangeDate = _ref => {
+  let {
+    dateStart,
+    dateEnd,
+    displayFormatDay = 'D',
+    showHeader = true,
+    otherProps
+  } = _ref;
   const [selectedDateStart, setSelectedDateStart] = useState(dateStart);
   const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);
   const [focusedInput, setFocusedInput] = useState(START_DATE);
@@ -37,10 +45,11 @@ const DatePickerRangeDate = ({
     setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
   };
 
-  const handleDatesChange = ({
-    startDate,
-    endDate
-  }) => {
+  const handleDatesChange = _ref2 => {
+    let {
+      startDate,
+      endDate
+    } = _ref2;
     setSelectedDateStart(startDate);
     setSelectedDateEnd(endDate);
   };
@@ -81,16 +90,16 @@ const DatePickerRangeDate = ({
       focused: true,
       focusedInput: focusedInput,
       hideKeyboardShortcutsPanel: true,
-      navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navNext: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-next')
       }),
-      navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navPrev: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-prev'),
         icon: ChevronLeft
       }),
       onDatesChange: handleDatesChange,
       onFocusChange: handleFocusChange,
-      renderDayContents: date => /*#__PURE__*/_jsx(DatePickerDay, {
+      renderDayContents: date => /*#__PURE__*/_jsx(Day, {
         className: classNameElement('day-contents'),
         date: date.format(displayFormatDay)
       }),

package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -2,8 +2,7 @@ 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 DSDateInput from '@elliemae/ds-basic/form/DateInputV2';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const blockname = 'date-range-picker';
@@ -12,21 +11,25 @@ const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the us
 // to be higher than 999
 
 const MAGIC_NUMBER = 999;
-const Header = aggregatedClasses('div')(blockname, 'header', ({
-  invalidDate
-}) => ({
-  invalidDate
-}));
-
-const DatePickerRangeHeader = ({
-  onStartInputChange = () => null,
-  onEndInputChange = () => null,
-  onFocusChange = () => null,
-  selectedStartDate,
-  selectedEndDate,
-  handleDatesChange,
-  autoJumpOnEdit = true
-}) => {
+const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
+  let {
+    invalidDate
+  } = _ref;
+  return {
+    invalidDate
+  };
+});
+
+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();
@@ -110,7 +113,7 @@ const DatePickerRangeHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInput, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'start-date'
     },
@@ -119,7 +122,7 @@ const DatePickerRangeHeader = ({
     onFocus: () => handleOnFocus('startDate'),
     onKeyDown: handleOnKeyDownStart,
     value: startValue
-  }), /*#__PURE__*/_jsx(DSDateInput, {
+  }), /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'end-date'
     },