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

package/esm/components/DatePickerController/DatePickerController.js

@@ -1,11 +1,11 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _toArray from '@babel/runtime/helpers/esm/toArray';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+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';
@@ -18,27 +18,19 @@ import { SingleDatePickerPhrases } from '../../defaultPhrases.js';
 import { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth.js';
 import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
 import Day from '../DatePickerDay/DatePickerDay.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icon';
-import '../../prop-types-578e866b.js';
+import { jsx } from 'react/jsx-runtime';
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var _convertPropToCssClas = convertPropToCssClassName('datepicker-range'),
-    classNameElement = _convertPropToCssClas.classNameElement,
-    classNameBlock = _convertPropToCssClas.classNameBlock;
-
-var focusElementOnOpen = debounce(function (datePickerDom, firstFocusableItemDom, focusCurrentDate) {
+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 focusElementOnOpen = debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {
   if (datePickerDom) {
-    var currentDay = Array.from(datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__today')).filter(function (el) {
-      return !el.className.includes('CalendarDay__outside');
-    })[0];
-
-    var _datePickerDom$getEle = datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__selected'),
-        _datePickerDom$getEle2 = _slicedToArray(_datePickerDom$getEle, 1),
-        calendarDaySelected = _datePickerDom$getEle2[0];
+    const currentDay = Array.from(datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__today')).filter(el => !el.className.includes('CalendarDay__outside'))[0];
+    const [calendarDaySelected] = datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__selected');
 
     if (calendarDaySelected) {
       var _calendarDaySelected$;
@@ -47,43 +39,29 @@ var focusElementOnOpen = debounce(function (datePickerDom, firstFocusableItemDom
     } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();else {
       var _navButton$focus;
 
-      var navButton = firstFocusableItemDom === null || firstFocusableItemDom === void 0 ? void 0 : firstFocusableItemDom.closest('.DayPickerNavigation_button>div');
+      const navButton = firstFocusableItemDom === null || firstFocusableItemDom === void 0 ? void 0 : firstFocusableItemDom.closest('.DayPickerNavigation_button>div');
       navButton === null || navButton === void 0 ? void 0 : (_navButton$focus = navButton.focus) === null || _navButton$focus === void 0 ? void 0 : _navButton$focus.call(navButton);
     }
   }
 }, 100);
-
-var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
-  _inherits(DSDatePickerController, _React$Component);
-
-  var _super = _createSuper(DSDatePickerController);
-
+class DSDatePickerController extends React.Component {
   // eslint-disable-next-line react/static-property-placement
-  function DSDatePickerController(props) {
-    var _this;
-
-    _classCallCheck(this, DSDatePickerController);
+  constructor(props) {
+    super(props);
 
-    _this = _super.call(this, props);
-
-    _this.handleMouseUp = function () {
+    this.handleMouseUp = () => {
       var _focusedElement$blur;
 
-      var focusedElement = document.activeElement;
+      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);
     };
 
-    _this.handleKeyDown = function (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 onClickEscape = _this.props.onClickEscape;
+    this.handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const {
+        onClickEscape
+      } = this.props;
 
       switch (event.key) {
         case 'Home':
@@ -100,12 +78,15 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.getSafeValue = function () {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          date = _this$props.date,
-          defaultValue = _this$props.defaultValue;
-      var selectedDate = _this.state.selectedDate;
+    this.getSafeValue = () => {
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
       if (value) return moment(value);
       if (date) return moment(date);
       if (defaultValue) return moment(defaultValue);
@@ -113,22 +94,24 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
       return null;
     };
 
-    _this.isControlled = function () {
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          date = _this$props2.date;
+    this.isControlled = () => {
+      const {
+        value,
+        date
+      } = this.props;
       return Boolean(value) || Boolean(date);
     };
 
-    _this.handleDateChange = function (date) {
-      var _this$props3 = _this.props,
-          readOnly = _this$props3.readOnly,
-          onDateChange = _this$props3.onDateChange,
-          onChange = _this$props3.onChange;
+    this.handleDateChange = date => {
+      const {
+        readOnly,
+        onDateChange,
+        onChange
+      } = this.props;
 
       if (!readOnly) {
-        if (!_this.isControlled()) {
-          _this.setState({
+        if (!this.isControlled()) {
+          this.setState({
             selectedDate: date
           });
         }
@@ -138,29 +121,25 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.handleChange = function (dataInput) {
-      var _this$props4 = _this.props,
-          onDateChange = _this$props4.onDateChange,
-          onChange = _this$props4.onChange;
-      var momentvalue = moment(dataInput.target.value);
-
-      _this.setState({
+    this.handleChange = dataInput => {
+      const {
+        onDateChange,
+        onChange
+      } = this.props;
+      const momentvalue = moment(dataInput.target.value);
+      this.setState({
         selectedDate: momentvalue
       });
-
       onDateChange(momentvalue);
       onChange(momentvalue);
     };
 
-    _this.handleNavClick = function (date, nav) {
-      var _document$getElements3 = document.getElementsByClassName('DayPickerNavigation_button'),
-          _document$getElements4 = _slicedToArray(_document$getElements3, 2),
-          prev = _document$getElements4[0],
-          next = _document$getElements4[1];
-
-      var _this$props5 = _this.props,
-          onPrevMonthClick = _this$props5.onPrevMonthClick,
-          onNextMonthClick = _this$props5.onNextMonthClick;
+    this.handleNavClick = (date, nav) => {
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
+      const {
+        onPrevMonthClick,
+        onNextMonthClick
+      } = this.props;
 
       if (nav === 'prev') {
         var _prev$focus;
@@ -175,81 +154,75 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.insideBlur = function (event) {
-      var datePicker = _this.state.datePicker;
+    this.insideBlur = event => {
+      const {
+        datePicker
+      } = this.state;
 
       if (!datePicker.current.contains(event.currentTarget)) {
-        _this.props.onClose();
+        this.props.onClose();
       }
     };
 
-    _this.state = {
+    this.state = {
       selectedDate: null,
       firstFocusableItem: /*#__PURE__*/React.createRef(),
       datePicker: /*#__PURE__*/React.createRef()
     };
-    return _this;
   }
 
-  _createClass(DSDatePickerController, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+  componentDidMount() {
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
+    setTimeout(() => {
+      focusElementOnOpen(datePicker === null || datePicker === void 0 ? void 0 : datePicker.current, firstFocusableItem === null || firstFocusableItem === void 0 ? void 0 : firstFocusableItem.current, this.props.focusCurrentDate);
+    }, 400);
+  }
 
-      var _this$state = this.state,
-          datePicker = _this$state.datePicker,
-          firstFocusableItem = _this$state.firstFocusableItem;
-      datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
-      document.addEventListener('keydown', this.handleKeyDown, false);
-      setTimeout(function () {
-        focusElementOnOpen(datePicker === null || datePicker === void 0 ? void 0 : datePicker.current, firstFocusableItem === null || firstFocusableItem === void 0 ? void 0 : firstFocusableItem.current, _this2.props.focusCurrentDate);
-      }, 400);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var datePicker = this.state.datePicker;
-      datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
-      document.removeEventListener('keydown', this.handleKeyDown, false);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
+  componentWillUnmount() {
+    const {
+      datePicker
+    } = this.state;
+    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
 
-      var _this$props6 = this.props,
-          numberOfMonths = _this$props6.numberOfMonths,
-          enableOutsideDays = _this$props6.enableOutsideDays,
-          transitionDuration = _this$props6.transitionDuration,
-          initialVisibleMonth = _this$props6.initialVisibleMonth,
-          firstDayOfWeek = _this$props6.firstDayOfWeek,
-          keepOpenOnDateSelect = _this$props6.keepOpenOnDateSelect,
-          hideKeyboardShortcutsPanel = _this$props6.hideKeyboardShortcutsPanel,
-          onClose = _this$props6.onClose,
-          phrases = _this$props6.phrases,
-          displayFormatDay = _this$props6.displayFormatDay,
-          isDayBlocked = _this$props6.isDayBlocked,
-          isOutsideRange = _this$props6.isOutsideRange,
-          isDayHighlighted = _this$props6.isDayHighlighted,
-          onOutsideClick = _this$props6.onOutsideClick,
-          key = _this$props6.key,
-          calendarProps = _this$props6.calendarProps;
-      var _this$state2 = this.state,
-          datePicker = _this$state2.datePicker,
-          firstFocusableItem = _this$state2.firstFocusableItem;
-      var safedate = this.getSafeValue();
-      var safeinitialMonth = safedate && safedate.isValid() ? function () {
-        return safedate;
-      } : function () {
-        return initialVisibleMonth;
-      };
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _extends({
-        onBlur: this.insideBlur,
-        ref: datePicker,
-        className: classNameBlock('wrapper-day-picker-single-date-controller'),
-        "data-testid": "calendar-wrapper"
-      }, calendarProps), /*#__PURE__*/React.createElement(DayPickerSingleDateController, {
-        key: key,
+  render() {
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+      transitionDuration,
+      initialVisibleMonth,
+      firstDayOfWeek,
+      keepOpenOnDateSelect,
+      hideKeyboardShortcutsPanel,
+      onClose,
+      phrases,
+      displayFormatDay,
+      isDayBlocked,
+      isOutsideRange,
+      isDayHighlighted,
+      onOutsideClick,
+      key,
+      calendarProps
+    } = this.props;
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    const safedate = this.getSafeValue();
+    const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
+    return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      onBlur: this.insideBlur,
+      ref: datePicker,
+      className: classNameBlock('wrapper-day-picker-single-date-controller'),
+      "data-testid": "calendar-wrapper"
+    }, calendarProps), {}, {
+      children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
         date: safedate,
         enableOutsideDays: enableOutsideDays,
         firstDayOfWeek: firstDayOfWeek,
@@ -260,10 +233,10 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
         isDayHighlighted: isDayHighlighted,
         isOutsideRange: isOutsideRange,
         keepOpenOnDateSelect: keepOpenOnDateSelect,
-        navNext: /*#__PURE__*/React.createElement(Navigation, {
+        navNext: /*#__PURE__*/_jsx(Navigation, {
           className: classNameElement('navigation-next')
         }),
-        navPrev: /*#__PURE__*/React.createElement(Navigation, {
+        navPrev: /*#__PURE__*/_jsx(Navigation, {
           className: classNameElement('navigation-prev'),
           icon: ChevronLeft,
           innerRef: firstFocusableItem
@@ -272,34 +245,30 @@ var DSDatePickerController = /*#__PURE__*/function (_React$Component) {
         numberOfMonths: numberOfMonths,
         onClose: onClose,
         onDateChange: this.handleDateChange,
-        onNextMonthClick: function onNextMonthClick(e) {
-          _this3.handleNavClick(e, 'next');
+        onNextMonthClick: e => {
+          this.handleNavClick(e, 'next');
         },
         onOutsideClick: onOutsideClick,
-        onPrevMonthClick: function onPrevMonthClick(e) {
-          _this3.handleNavClick(e, 'prev');
+        onPrevMonthClick: e => {
+          this.handleNavClick(e, 'prev');
         },
         phrases: phrases,
-        renderDayContents: function renderDayContents(date) {
-          return /*#__PURE__*/React.createElement(Day, {
-            className: classNameElement('day-contents'),
-            date: date.format(displayFormatDay)
-          });
-        },
+        renderDayContents: date => /*#__PURE__*/_jsx(Day, {
+          className: classNameElement('day-contents'),
+          date: date.format(displayFormatDay)
+        }),
         transitionDuration: transitionDuration,
-        onTab: function onTab(e) {
+        onTab: e => {
           if (e.target.classList.contains('CalendarDay')) {
             e.preventDefault();
             onClose();
           }
         }
-      })));
-    }
-  }]);
-
-  return DSDatePickerController;
-}(React.Component);
+      }, key)
+    })));
+  }
 
+}
 DSDatePickerController.defaultProps = {
   date: '',
   value: '',
@@ -308,64 +277,22 @@ DSDatePickerController.defaultProps = {
   firstDayOfWeek: 0,
   keepOpenOnDateSelect: true,
   hideKeyboardShortcutsPanel: true,
-  onPrevMonthClick: function onPrevMonthClick() {
-    return null;
-  },
-  onNextMonthClick: function onNextMonthClick() {
-    return null;
-  },
-  onClose: function onClose() {
-    return null;
-  },
-  onChange: function onChange() {
-    return null;
-  },
-  onClickEscape: function onClickEscape() {
-    return null;
-  },
-  onDateChange: function onDateChange() {
-    return null;
-  },
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onChange: () => null,
+  onClickEscape: () => null,
+  onDateChange: () => null,
   phrases: SingleDatePickerPhrases,
   // displayFormat: 'L',
   displayFormatDay: 'D',
   transitionDuration: 0,
   // verticalSpacing: 0,
-  isDayBlocked: function isDayBlocked() {
-    return false;
-  },
-  isOutsideRange: function isOutsideRange() {
-    return false;
-  },
-  isDayHighlighted: function isDayHighlighted() {
-    return false;
-  },
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
   numberOfMonths: 1
 };
-DSDatePickerController.propTypes = {
-  date: PropTypes.instanceOf(Date, moment),
-  value: PropTypes.oneOf(PropTypes.instanceOf(Date), PropTypes.instanceOf(moment)),
-  enableOutsideDays: PropTypes.bool,
-  initialVisibleMonth: PropTypes.instanceOf(Date, moment),
-  firstDayOfWeek: PropTypes.number,
-  keepOpenOnDateSelect: PropTypes.bool,
-  hideKeyboardShortcutsPanel: PropTypes.bool,
-  onPrevMonthClick: PropTypes.func,
-  onNextMonthClick: PropTypes.func,
-  onClose: PropTypes.func,
-  onClickEscape: PropTypes.func,
-  onChange: PropTypes.func,
-  onDateChange: PropTypes.func,
-  phrases: SingleDatePickerPhrases,
-  // displayFormat: PropTypes.string,
-  displayFormatDay: PropTypes.string,
-  transitionDuration: PropTypes.number,
-  // verticalSpacing: PropTypes.number,
-  isDayBlocked: PropTypes.func,
-  isOutsideRange: PropTypes.func,
-  isDayHighlighted: PropTypes.func,
-  numberOfMonths: PropTypes.number
-};
 DSDatePickerController.defaultProps = {
   date: '',
   value: '',
@@ -374,24 +301,12 @@ DSDatePickerController.defaultProps = {
   firstDayOfWeek: 0,
   keepOpenOnDateSelect: true,
   hideKeyboardShortcutsPanel: true,
-  onPrevMonthClick: function onPrevMonthClick() {
-    return null;
-  },
-  onNextMonthClick: function onNextMonthClick() {
-    return null;
-  },
-  onClose: function onClose() {
-    return null;
-  },
-  onClickEscape: function onClickEscape() {
-    return null;
-  },
-  onChange: function onChange() {
-    return null;
-  },
-  onDateChange: function onDateChange() {
-    return null;
-  },
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onClickEscape: () => null,
+  onChange: () => null,
+  onDateChange: () => null,
   phrases: PropTypes.shape({
     calendarLabel: PropTypes.string,
     closeDatePicker: PropTypes.string,
@@ -426,17 +341,10 @@ DSDatePickerController.defaultProps = {
   displayFormatDay: 'D',
   transitionDuration: 0,
   // verticalSpacing: 0,
-  isDayBlocked: function isDayBlocked() {
-    return false;
-  },
-  isOutsideRange: function isOutsideRange() {
-    return false;
-  },
-  isDayHighlighted: function isDayHighlighted() {
-    return false;
-  },
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
   numberOfMonths: 1
 };
 
 export { DSDatePickerController as default };
-//# sourceMappingURL=DatePickerController.js.map

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -1,24 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 
-var Day = function Day(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? 'date-picker-content-day' : _ref$className,
-      _ref$date = _ref.date,
-      date = _ref$date === void 0 ? '' : _ref$date;
-  return /*#__PURE__*/React.createElement("div", {
+const Day = _ref => {
+  let {
+    className = 'date-picker-content-day',
+    date = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
     className: className,
     "data-testid": "datepicker-day-".concat(date)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, void 0, /*#__PURE__*/_jsx("div", {
     className: "".concat(className, "-half"),
     "data-testid": "datepicker-day"
-  }, date));
-};
-
-Day.propTypes = {
-  className: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }, void 0, date));
 };
 
 export { Day as default };
-//# sourceMappingURL=DatePickerDay.js.map