@elliemae/ds-date-range-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/components/DayPickerRangeController.js

@@ -0,0 +1,147 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+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');
+var React = require('react');
+var reactDates = require('react-dates');
+var dsDatePicker = require('@elliemae/ds-date-picker');
+var dsIcons = require('@elliemae/ds-icons');
+var dsClassnames = require('@elliemae/ds-classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
+
+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__default["default"](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
+} = dsClassnames.convertPropToCssClassName('datepicker-range');
+
+const DayPickerRangeController = _ref => {
+  let {
+    endDate = undefined,
+    startDate = undefined,
+    displayFormatDay = 'D',
+    focusedInput = undefined,
+    enableOutsideDays = false,
+    onDatesChange = () => null,
+    onFocusChange = () => null,
+    onOutsideClick = () => null,
+    isDayBlocked = () => null,
+    isDayHighlighted = () => null,
+    isOutsideRange = () => null,
+    onNextMonthClick = () => null,
+    onPrevMonthClick = () => null
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const datePickerRef = React.useRef();
+  React.useEffect(() => {
+    const handleMouseUp = () => {
+      const focusedElement = document.activeElement;
+      focusedElement.blur();
+    };
+
+    const handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const focusedElement = document.activeElement;
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
+
+      switch (event.key) {
+        case 'Home':
+          event.stopPropagation();
+          firstDay.focus();
+          break;
+
+        case 'End':
+          event.stopPropagation();
+          lastDay.focus();
+          break;
+
+        case 'Enter':
+        case ' ':
+          if (focusedElement === prev) {
+            event.stopPropagation();
+            setTimeout(() => {
+              prev.focus();
+            }, 240);
+          } else if (focusedElement === next) {
+            event.stopPropagation();
+            setTimeout(() => {
+              next === null || next === void 0 ? void 0 : next.focus();
+            }, 240);
+          }
+
+          break;
+
+        case 'Tab':
+          if (firstDay === focusedElement || restOfDays.includes(focusedElement)) {
+            event.preventDefault();
+            prev.focus();
+          }
+
+          break;
+      }
+    };
+
+    datePickerRef.current.addEventListener('mouseup', handleMouseUp, false);
+    datePickerRef.current.addEventListener('keydown', handleKeyDown, false);
+    return () => {
+      if (datePickerRef.current) {
+        datePickerRef.current.removeEventListener('mouseup', handleMouseUp, false);
+        datePickerRef.current.removeEventListener('keydown', handleKeyDown, false);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: datePickerRef,
+    className: classNameBlock('wrapper-day-picker-single-date-controller'),
+    "data-testid": otherProps['data-testid'] || 'date-range-picker-controller',
+    children: /*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange,
+      enableOutsideDays: enableOutsideDays,
+      endDate: endDate,
+      focused: true,
+      focusedInput: focusedInput,
+      hideKeyboardShortcutsPanel: true,
+      navNext: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+        className: classNameElement('navigation-next')
+      }),
+      navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+        className: classNameElement('navigation-prev'),
+        icon: dsIcons.ChevronLeft
+      }),
+      onDatesChange: onDatesChange,
+      onFocusChange: onFocusChange,
+      onOutsideClick: onOutsideClick,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      renderDayContents: date => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
+        className: classNameElement('day-contents'),
+        date: date.format(displayFormatDay)
+      }),
+      renderMonthElement: dsDatePicker.renderMonthElement,
+      startDate: startDate
+    }))
+  });
+};
+
+module.exports = DayPickerRangeController;

package/cjs/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSDateRangePicker = require('./DSDateRangePicker.js');
+var DayPickerRangeController = require('./components/DayPickerRangeController.js');
+var DSDateRangePickerImpl = require('./components/DSDateRangePickerImpl.js');
+
+
+
+exports.DateRangePickerWithSchema = DSDateRangePicker.DateRangePickerWithSchema;
+exports["default"] = DSDateRangePicker["default"];
+exports.DayPickerRangeController = DayPickerRangeController;
+exports.END_DATE = DSDateRangePickerImpl.END_DATE;
+exports.START_DATE = DSDateRangePickerImpl.START_DATE;

package/cjs/isMaxDiffSafe.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable max-params */
+const MAX_YEARS_DIFF = 150; // https://jira.elliemae.io/browse/PUI-4145
+
+const isMaxDiffSafe = (startDate, endDate, prevStart, prevEnd) => {
+  try {
+    const diff = Math.abs(endDate.diff(startDate, 'years'));
+    const diffStart = Math.abs(startDate.diff(prevStart, 'years'));
+    const diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));
+    return diff < MAX_YEARS_DIFF && diffStart < MAX_YEARS_DIFF && diffEnd < MAX_YEARS_DIFF;
+  } catch (error) {
+    return true;
+  }
+};
+
+exports.MAX_YEARS_DIFF = MAX_YEARS_DIFF;
+exports.isMaxDiffSafe = isMaxDiffSafe;

package/esm/DSDateRangePicker.js

@@ -0,0 +1,191 @@
+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 'react';
+import { PropTypes, describe } from 'react-desc';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import moment from 'moment';
+import 'react-dates/initialize';
+import { DateRangePickerPhrases } from 'react-dates/lib/defaultPhrases';
+export { default as DayPickerRangeController } from './components/DayPickerRangeController.js';
+import DSDateRangePickerImpl from './components/DSDateRangePickerImpl.js';
+export { END_DATE, START_DATE } from './components/DSDateRangePickerImpl.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 DSDateRangePicker = _ref => {
+  let {
+    containerProps = {},
+    className = '',
+    disabled = false,
+    required = false,
+    startDateRequired = false,
+    endDateRequired = false,
+    id,
+    hasError = false,
+    validationMessage = '',
+    readOnly = false,
+    screenReaderInputMessage = 'Select date',
+    initialVisibleMonth = moment(),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = true,
+    reopenPickerOnClearDates = false,
+    hideKeyboardShortcutsPanel = true,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onOutsideClick = () => null,
+    transitionDuration = 0,
+    verticalSpacing = 0,
+    minimumNights = 0,
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    displayFormat = 'L',
+    displayFormatDay = 'D',
+    phrases = DateRangePickerPhrases,
+    startDate,
+    endDate,
+    startDateId = 'startDateId',
+    endDateId = 'endDateId',
+    labelFrom = 'From',
+    labelTo = 'To',
+    enableOutsideDays = true,
+    onChangeStartInput = () => null,
+    onChangeEndInput = () => null,
+    onDatesChange = () => null
+  } = _ref;
+  const {
+    cssClassName,
+    prefixBlockName
+  } = convertPropToCssClassName('datepicker', className, {
+    hasError,
+    readOnly,
+    disabled,
+    id
+  });
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    className: "".concat(prefixBlockName, "-range ").concat(cssClassName, " ").concat(prefixBlockName, "-range"),
+    children: /*#__PURE__*/_jsx(DSDateRangePickerImpl, {
+      appendToBody: true,
+      disabled: disabled,
+      displayFormat: displayFormat,
+      displayFormatDay: displayFormatDay,
+      enableOutsideDays: enableOutsideDays,
+      endDate: endDate,
+      endDateId: endDateId,
+      firstDayOfWeek: firstDayOfWeek,
+      hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+      initialVisibleMonth: () => initialVisibleMonth ? moment(initialVisibleMonth) : moment(startDate),
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange === true || isOutsideRange === false ? () => isOutsideRange : isOutsideRange,
+      keepOpenOnDateSelect: keepOpenOnDateSelect,
+      labelFrom: labelFrom,
+      labelTo: labelTo,
+      minimumNights: minimumNights,
+      onDatesChange: onDatesChange,
+      onChangeStartInput: onChangeStartInput,
+      onChangeEndInput: onChangeEndInput,
+      onClose: onClose,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      onOutsideClick: onOutsideClick,
+      phrases: phrases,
+      readOnly: readOnly,
+      reopenPickerOnClearDates: reopenPickerOnClearDates,
+      required: required,
+      startDateRequired: startDateRequired,
+      endDateRequired: endDateRequired,
+      screenReaderInputMessage: screenReaderInputMessage,
+      startDate: startDate,
+      startDateId: startDateId,
+      transitionDuration: transitionDuration,
+      verticalSpacing: verticalSpacing,
+      hasError: hasError,
+      validationMessage: validationMessage
+    })
+  }));
+};
+
+const dateRangePickerProps = {
+  containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),
+  className: PropTypes.string.description('html class attribute'),
+  disabled: PropTypes.bool.description('disable component or not').defaultValue(false),
+  required: PropTypes.bool.description('input is required or not').defaultValue(false),
+  startDateRequired: PropTypes.bool.description('start date is required or not').defaultValue(false),
+  endDateRequired: PropTypes.bool.description('end date is required or not').defaultValue(false),
+  id: PropTypes.string.description('components id'),
+  hasError: PropTypes.bool.description('set error state').defaultValue(false),
+  validationMessage: PropTypes.string.description('validation message'),
+  readOnly: PropTypes.bool.description('component is read only or not').description(false),
+  screenReaderInputMessage: PropTypes.string.description('message to be anounced by screen reader').defaultValue('select date'),
+  initialVisibleMonth: PropTypes.instanceOf(Date, moment).description('initial visible month'),
+  firstDayOfWeek: PropTypes.number.description('first day of week').defaultValue(0),
+  keepOpenOnDateSelect: PropTypes.bool.description('keep picker open when a date is selected').defaultValue(true),
+  reopenPickerOnClearDates: PropTypes.bool.description('reopen picker when clearing dates').defaultValue(false),
+  hideKeyboardShortcutsPanel: PropTypes.bool.description('hide keyabord shortcut panel or not'),
+  onPrevMonthClick: PropTypes.func.description('function executed when clicking on prev month button'),
+  onNextMonthClick: PropTypes.func.description('function executed when clicking on next month button'),
+  onClose: PropTypes.func.description('function executed when component closes'),
+  transitionDuration: PropTypes.number.description('transition duration').defaultValue(0),
+  verticalSpacing: PropTypes.number.description('vertical spacing'),
+  isDayBlocked: PropTypes.func.description('function that returns each day and disables desired dates'),
+  isOutsideRange: PropTypes.func.description('function that returns each day and disables outisde range dates'),
+  isDayHighlighted: PropTypes.func.description('function that returns each day and higlights desired dates'),
+  minimumNights: 0,
+  displayFormat: PropTypes.string.description('display format').defaultValue('L'),
+  displayFormatDay: PropTypes.string.description('display format day').defaultValue('D'),
+  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
+  }).description('react-dates phrases'),
+  startDate: PropTypes.instanceOf(Date, moment).description('start date value'),
+  endDate: PropTypes.instanceOf(Date, moment).description('end date value'),
+  startDateId: PropTypes.string.description('start date id'),
+  endDateId: PropTypes.string.description('end date id'),
+  labelFrom: PropTypes.string.description('label of start date input'),
+  labelTo: PropTypes.string.description('label of end date input'),
+  enableOutsideDays: PropTypes.bool.description('enable days outside current month').defaultValue('true'),
+  onDatesChange: PropTypes.func.description('function executed when dates change'),
+  onChangeStartInput: PropTypes.func.description('function executed when start date input changes'),
+  onChangeEndInput: PropTypes.func.description('function executed when end date input changes'),
+  onOutsideClick: PropTypes.func.description('function executed when clicking outside component')
+};
+const DateRangePickerWithSchema = describe(DSDateRangePicker);
+DateRangePickerWithSchema.propTypes = dateRangePickerProps;
+
+export { DateRangePickerWithSchema, DSDateRangePicker as default };