@elliemae/ds-date-picker 3.0.0-next.2 → 3.0.0-next.6

package/esm/components/DSDatePickerImpl.js

@@ -1,346 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import React from 'react';
-import moment from 'moment';
-import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
-import DSDatePickerController from './DatePickerController/DatePickerController.js';
-import DatePickerDropdown from './DatePickerDropdown.js';
-
-const FORMAT = 'MMDDYYYY';
-class DSdatePickerImpl extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onClickPicker = () => {
-      this.setState({
-        inputFocused: true
-      });
-    };
-
-    this.getSafeValue = () => {
-      const {
-        value,
-        date,
-        defaultValue
-      } = this.props;
-      const {
-        selectedDate
-      } = this.state;
-
-      if (value) {
-        return moment(value, FORMAT, true);
-      }
-
-      if (date) {
-        return moment(date, FORMAT, true);
-      }
-
-      if (defaultValue) {
-        return moment(defaultValue, FORMAT, true);
-      }
-
-      if (selectedDate) {
-        return selectedDate;
-      }
-
-      return null;
-    };
-
-    this.getSafeInputValue = () => {
-      const safeValue = this.getSafeValue();
-
-      if (safeValue && safeValue.isValid()) {
-        return safeValue.format(FORMAT);
-      }
-
-      const {
-        dataInput
-      } = this.state;
-      return dataInput;
-    };
-
-    this.isControlled = () => {
-      const {
-        value,
-        date
-      } = this.props;
-      return Boolean(value) || Boolean(date);
-    };
-
-    this.handleDateChange = (date, event) => {
-      const {
-        readOnly,
-        onDateChange,
-        keepOpenOnDateSelect,
-        onChange,
-        onBlur
-      } = this.props;
-
-      if (!readOnly) {
-        if (!this.isControlled()) {
-          this.setState({
-            dataInput: date.format(FORMAT),
-            selectedDate: date
-          });
-        }
-
-        onChange(date.format(FORMAT), date);
-        onDateChange(date);
-
-        if (!keepOpenOnDateSelect || event.key === 'Enter') {
-          this.setState({
-            inputFocused: false
-          });
-          onBlur(date.format(FORMAT), date);
-        }
-      }
-    };
-
-    this.handleInputChange = (dataInput, newDate) => {
-      const {
-        onChange
-      } = this.props;
-      const newState = {
-        dataInput,
-        selectedDate: newDate
-      };
-      this.setState(() => newState);
-      onChange(dataInput, newDate);
-    };
-
-    this.handleChange = newDate => {
-      if (!newDate) return;
-      const {
-        onDateChange
-      } = this.props;
-      const momentValue = moment(newDate, FORMAT, true);
-      if (!momentValue.isValid()) return;
-      this.setState({
-        selectedDate: momentValue
-      });
-      onDateChange(momentValue);
-    };
-
-    this.handleFocus = _ref => {
-      let {
-        focused
-      } = _ref;
-      this.setState({
-        inputFocused: focused
-      });
-    };
-
-    this.handleCalendarClose = () => {
-      const {
-        onClose
-      } = this.props;
-      this.setState({
-        inputFocused: false
-      });
-      this.handleOnBlur();
-      onClose();
-    };
-
-    this.handleClickEscape = () => {
-      const {
-        onClose
-      } = this.props;
-      this.setState({
-        inputFocused: false
-      });
-      this.handleOnBlur();
-      onClose();
-    };
-
-    this.handleOnBlur = () => {
-      setTimeout(() => {
-        const {
-          onBlur,
-          autoClear
-        } = this.props;
-        const {
-          dataInput,
-          selectedDate
-        } = this.state;
-
-        if (moment(selectedDate, FORMAT, true).isValid()) {
-          onBlur(dataInput, selectedDate);
-        } else {
-          if (autoClear) {
-            this.setState({
-              dataInput: undefined
-            });
-          }
-
-          onBlur(dataInput, null);
-        }
-      });
-    };
-
-    this.handleInputFocus = dataInput => {
-      const {
-        onFocus
-      } = this.props;
-      onFocus(dataInput);
-    };
-
-    this.state = {
-      pickerRef: /*#__PURE__*/React.createRef(),
-      dataInput: '',
-      selectedDate: null,
-      inputFocused: false
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const {
-      dataInput: prevVal,
-      selectedDate: prevDate
-    } = prevState || {};
-    const {
-      value: nextVal,
-      date: nextDate
-    } = nextProps;
-    const isPrevValMoment = prevVal instanceof moment;
-    const isPrevDateMoment = prevDate instanceof moment;
-    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) {
-      return {
-        dataInput: '',
-        selectedDate: null
-      };
-    } // when val is an incomplete state, we don't want to mess with the state
-    //  it's incomplete when length is not the full mmddyyyy (length === 8)
-
-
-    if ((prevValAsString === null || prevValAsString === void 0 ? void 0 : prevValAsString.length) < 8) {
-      return null;
-    }
-
-    const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
-    const isNextValMoment = nextVal instanceof moment;
-    const isNextDateMoment = nextDate instanceof moment;
-    const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
-    const nextValAsMoment = isNextValMoment ? nextVal : moment(nextVal);
-    const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
-    const nextDateAsMoment = isNextDateMoment ? nextDate : moment(nextDate);
-    const hasValChanged = nextValAsString !== prevValAsString;
-    const hasDateChanged = nextDateAsString !== prevDateAsString;
-    const newState = {};
-    let skipStateChange = true; // value has priority over date, if both date and value change we take date
-    // as such, order of condition is meaningful
-
-    if (hasDateChanged) {
-      skipStateChange = false;
-      newState.dataInput = nextDateAsString;
-      newState.selectedDate = nextDateAsMoment;
-    }
-
-    if (hasValChanged) {
-      skipStateChange = false;
-      newState.dataInput = nextValAsString;
-      newState.selectedDate = nextValAsMoment;
-    }
-
-    if (skipStateChange) return null;
-    return newState;
-  }
-
-  render() {
-    var _this = this;
-
-    const {
-      inputFocused
-    } = this.state;
-    const {
-      disabled,
-      numberOfMonths,
-      readOnly,
-      enableOutsideDays,
-      transitionDuration,
-      firstDayOfWeek,
-      keepOpenOnDateSelect,
-      hideKeyboardShortcutsPanel,
-      onPrevMonthClick,
-      onNextMonthClick,
-      onClose,
-      phrases,
-      placeholder,
-      displayFormatDay,
-      isDayBlocked,
-      isOutsideRange,
-      isDayHighlighted,
-      tabIndex,
-      zIndex,
-      pickerProps,
-      calendarProps,
-      focusCurrentDate
-    } = this.props;
-    const safedate = this.getSafeValue();
-    const safeInputValue = this.getSafeInputValue();
-    const hasSelectedDate = !!safedate;
-    return /*#__PURE__*/_jsx(DSInputGroup, {
-      rightAddon: /*#__PURE__*/_jsx(DatePickerDropdown, {
-        pickerRef: this.state.pickerRef,
-        disabled: disabled,
-        isOpen: inputFocused,
-        menu: /*#__PURE__*/_jsx("div", {
-          style: {
-            minHeight: '310px',
-            zIndex: 1
-          },
-          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
-          "data-testid": "date-picker-portal-wrapper"
-        }, void 0, /*#__PURE__*/_jsx(DSDatePickerController, {
-          date: safedate,
-          displayFormatDay: displayFormatDay,
-          enableOutsideDays: enableOutsideDays,
-          firstDayOfWeek: firstDayOfWeek,
-          hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
-          isDayBlocked: isDayBlocked,
-          isDayHighlighted: isDayHighlighted,
-          isOutsideRange: isOutsideRange,
-          keepOpenOnDateSelect: keepOpenOnDateSelect,
-          numberOfMonths: numberOfMonths,
-          onClickEscape: this.handleClickEscape,
-          onClose: function () {
-            if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
-            onClose(...arguments);
-
-            _this.setState({
-              inputFocused: false
-            });
-          },
-          onDateChange: this.handleDateChange,
-          onFocusChange: this.handleFocus,
-          onNextMonthClick: onNextMonthClick,
-          onOutsideClick: this.handleCalendarClose,
-          onPrevMonthClick: onPrevMonthClick,
-          phrases: phrases,
-          transitionDuration: transitionDuration,
-          calendarProps: calendarProps,
-          focusCurrentDate: focusCurrentDate
-        })),
-        onClick: this.onClickPicker,
-        readOnly: readOnly,
-        zIndex: zIndex,
-        pickerProps: pickerProps
-      })
-    }, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
-      "data-testid": "datepicker-input",
-      "aria-label": placeholder || 'Date Picker Input',
-      disabled: disabled,
-      onBlur: this.handleOnBlur,
-      onChange: this.handleInputChange,
-      onDateChange: this.handleChange,
-      onFocus: this.handleInputFocus,
-      placeholder: placeholder,
-      tabIndex: tabIndex,
-      value: safeInputValue
-    }));
-  }
-
-}
-
-export { DSdatePickerImpl as default };

package/esm/components/DatePickerController/DatePickerController.js

@@ -1,350 +0,0 @@
-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';
-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';
-import { SingleDatePickerPhrases } from '../../defaultPhrases.js';
-import { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth.js';
-import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
-import Day from '../DatePickerDay/DatePickerDay.js';
-import { jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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) {
-    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$;
-
-      calendarDaySelected === null || calendarDaySelected === void 0 ? void 0 : (_calendarDaySelected$ = calendarDaySelected.focus) === null || _calendarDaySelected$ === void 0 ? void 0 : _calendarDaySelected$.call(calendarDaySelected);
-    } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();else {
-      var _navButton$focus;
-
-      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);
-class DSDatePickerController extends React.Component {
-  // eslint-disable-next-line react/static-property-placement
-  constructor(props) {
-    super(props);
-
-    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);
-    };
-
-    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':
-          firstDay.focus();
-          break;
-
-        case 'End':
-          lastDay.focus();
-          break;
-
-        case 'Escape':
-          onClickEscape();
-          break;
-      }
-    };
-
-    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);
-      if (selectedDate) return moment(selectedDate);
-      return null;
-    };
-
-    this.isControlled = () => {
-      const {
-        value,
-        date
-      } = this.props;
-      return Boolean(value) || Boolean(date);
-    };
-
-    this.handleDateChange = date => {
-      const {
-        readOnly,
-        onDateChange,
-        onChange
-      } = this.props;
-
-      if (!readOnly) {
-        if (!this.isControlled()) {
-          this.setState({
-            selectedDate: date
-          });
-        }
-
-        onDateChange(date);
-        onChange(date);
-      }
-    };
-
-    this.handleChange = dataInput => {
-      const {
-        onDateChange,
-        onChange
-      } = this.props;
-      const momentvalue = moment(dataInput.target.value);
-      this.setState({
-        selectedDate: momentvalue
-      });
-      onDateChange(momentvalue);
-      onChange(momentvalue);
-    };
-
-    this.handleNavClick = (date, nav) => {
-      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
-      const {
-        onPrevMonthClick,
-        onNextMonthClick
-      } = this.props;
-
-      if (nav === 'prev') {
-        var _prev$focus;
-
-        prev === null || prev === void 0 ? void 0 : (_prev$focus = prev.focus) === null || _prev$focus === void 0 ? void 0 : _prev$focus.call(prev);
-        onPrevMonthClick(date);
-      } else {
-        var _next$focus;
-
-        next === null || next === void 0 ? void 0 : (_next$focus = next.focus) === null || _next$focus === void 0 ? void 0 : _next$focus.call(next);
-        onNextMonthClick(date);
-      }
-    };
-
-    this.insideBlur = event => {
-      const {
-        datePicker
-      } = this.state;
-
-      if (!datePicker.current.contains(event.currentTarget)) {
-        this.props.onClose();
-      }
-    };
-
-    this.state = {
-      selectedDate: null,
-      firstFocusableItem: /*#__PURE__*/React.createRef(),
-      datePicker: /*#__PURE__*/React.createRef()
-    };
-  }
-
-  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);
-  }
-
-  componentWillUnmount() {
-    const {
-      datePicker
-    } = this.state;
-    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
-    document.removeEventListener('keydown', this.handleKeyDown, false);
-  }
-
-  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,
-        focused: true,
-        hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
-        initialVisibleMonth: safeinitialMonth,
-        isDayBlocked: isDayBlocked,
-        isDayHighlighted: isDayHighlighted,
-        isOutsideRange: isOutsideRange,
-        keepOpenOnDateSelect: keepOpenOnDateSelect,
-        navNext: /*#__PURE__*/_jsx(Navigation, {
-          className: classNameElement('navigation-next')
-        }),
-        navPrev: /*#__PURE__*/_jsx(Navigation, {
-          className: classNameElement('navigation-prev'),
-          icon: ChevronLeft,
-          innerRef: firstFocusableItem
-        }),
-        renderMonthElement: renderMonthElement,
-        numberOfMonths: numberOfMonths,
-        onClose: onClose,
-        onDateChange: this.handleDateChange,
-        onNextMonthClick: e => {
-          this.handleNavClick(e, 'next');
-        },
-        onOutsideClick: onOutsideClick,
-        onPrevMonthClick: e => {
-          this.handleNavClick(e, 'prev');
-        },
-        phrases: phrases,
-        renderDayContents: date => /*#__PURE__*/_jsx(Day, {
-          className: classNameElement('day-contents'),
-          date: date.format(displayFormatDay)
-        }),
-        transitionDuration: transitionDuration,
-        onTab: e => {
-          if (e.target.classList.contains('CalendarDay')) {
-            e.preventDefault();
-            onClose();
-          }
-        }
-      }, key)
-    })));
-  }
-
-}
-DSDatePickerController.defaultProps = {
-  date: '',
-  value: '',
-  enableOutsideDays: false,
-  initialVisibleMonth: moment(),
-  firstDayOfWeek: 0,
-  keepOpenOnDateSelect: true,
-  hideKeyboardShortcutsPanel: true,
-  onPrevMonthClick: () => null,
-  onNextMonthClick: () => null,
-  onClose: () => null,
-  onChange: () => null,
-  onClickEscape: () => null,
-  onDateChange: () => null,
-  phrases: SingleDatePickerPhrases,
-  // displayFormat: 'L',
-  displayFormatDay: 'D',
-  transitionDuration: 0,
-  // verticalSpacing: 0,
-  isDayBlocked: () => false,
-  isOutsideRange: () => false,
-  isDayHighlighted: () => false,
-  numberOfMonths: 1
-};
-DSDatePickerController.defaultProps = {
-  date: '',
-  value: '',
-  enableOutsideDays: false,
-  initialVisibleMonth: moment(),
-  firstDayOfWeek: 0,
-  keepOpenOnDateSelect: true,
-  hideKeyboardShortcutsPanel: true,
-  onPrevMonthClick: () => null,
-  onNextMonthClick: () => null,
-  onClose: () => null,
-  onClickEscape: () => null,
-  onChange: () => null,
-  onDateChange: () => null,
-  phrases: PropTypes.shape({
-    calendarLabel: PropTypes.string,
-    closeDatePicker: PropTypes.string,
-    clearDates: PropTypes.string,
-    focusStartDate: PropTypes.string,
-    jumpToPrevMonth: PropTypes.string,
-    jumpToNextMonth: PropTypes.string,
-    keyboardShortcuts: PropTypes.string,
-    showKeyboardShortcutsPanel: PropTypes.string,
-    hideKeyboardShortcutsPanel: PropTypes.string,
-    openThisPanel: PropTypes.string,
-    enterKey: PropTypes.string,
-    leftArrowRightArrow: PropTypes.string,
-    upArrowDownArrow: PropTypes.string,
-    pageUpPageDown: PropTypes.string,
-    homeEnd: PropTypes.string,
-    escape: PropTypes.string,
-    questionMark: PropTypes.string,
-    selectFocusedDate: PropTypes.string,
-    moveFocusByOneDay: PropTypes.string,
-    moveFocusByOneWeek: PropTypes.string,
-    moveFocusByOneMonth: PropTypes.string,
-    moveFocustoStartAndEndOfWeek: PropTypes.string,
-    returnFocusToInput: PropTypes.string,
-    keyboardNavigationInstructions: PropTypes.string,
-    chooseAvailableStartDate: PropTypes.func,
-    chooseAvailableEndDate: PropTypes.func,
-    dateIsUnavailable: PropTypes.func,
-    dateIsSelected: PropTypes.func
-  }),
-  // displayFormat: 'L',
-  displayFormatDay: 'D',
-  transitionDuration: 0,
-  // verticalSpacing: 0,
-  isDayBlocked: () => false,
-  isOutsideRange: () => false,
-  isDayHighlighted: () => false,
-  numberOfMonths: 1
-};
-
-export { DSDatePickerController as default };

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -1,18 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-
-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 };