@elliemae/ds-date-picker 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/components/DatePickerController/DatePickerController.js

@@ -1,126 +1,196 @@
-import * as React from "react";
-import React2 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";
-import { renderMonthElement } from "../DatePickerRenderMonth/DatePickerRenderMonth";
-import { DatePickerNavigation } from "../DatePickerNavigation/DatePickerNavigation";
-import { DatePickerDay } from "../DatePickerDay/DatePickerDay";
-const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker-range");
+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?.getElementsByClassName("CalendarDay__today")).filter((el) => !el.className.includes("CalendarDay__outside"))[0];
-    const [calendarDaySelected] = datePickerDom?.getElementsByClassName("CalendarDay__selected");
+    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) {
-      calendarDaySelected?.focus?.();
-    } else if (focusCurrentDate && !calendarDaySelected)
-      currentDay.focus();
-    else {
-      const navButton = firstFocusableItemDom?.closest(".DayPickerNavigation_button>div");
-      navButton?.focus?.();
+      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 React2.Component {
+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?.blur?.();
+      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");
+
+    this.handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
       const [lastDay] = restOfDays.slice(-1);
-      const { onClickEscape } = this.props;
+      const {
+        onClickEscape
+      } = this.props;
+
       switch (event.key) {
-        case "Home":
+        case 'Home':
           firstDay.focus();
           break;
-        case "End":
+
+        case 'End':
           lastDay.focus();
           break;
-        case "Escape":
+
+        case 'Escape':
           onClickEscape();
           break;
-        default:
-          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);
+      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;
+      const {
+        value,
+        date
+      } = this.props;
       return Boolean(value) || Boolean(date);
     };
-    this.handleDateChange = (date) => {
-      const { readOnly, onDateChange, onChange } = this.props;
+
+    this.handleDateChange = date => {
+      const {
+        readOnly,
+        onDateChange,
+        onChange
+      } = this.props;
+
       if (!readOnly) {
         if (!this.isControlled()) {
-          this.setState({ selectedDate: date });
+          this.setState({
+            selectedDate: date
+          });
         }
+
         onDateChange(date);
         onChange(date);
       }
     };
-    this.handleChange = (dataInput) => {
-      const { onDateChange, onChange } = this.props;
+
+    this.handleChange = dataInput => {
+      const {
+        onDateChange,
+        onChange
+      } = this.props;
       const momentvalue = moment(dataInput.target.value);
-      this.setState({ selectedDate: momentvalue });
+      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") {
-        prev?.focus?.();
+      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 {
-        next?.focus?.();
+        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;
+
+    this.insideBlur = event => {
+      const {
+        datePicker
+      } = this.state;
+
       if (!datePicker.current.contains(event.currentTarget)) {
         this.props.onClose();
       }
     };
+
     this.state = {
       selectedDate: null,
-      firstFocusableItem: React2.createRef(),
-      datePicker: React2.createRef()
+      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);
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
     setTimeout(() => {
-      focusElementOnOpen(datePicker?.current, firstFocusableItem?.current, this.props.focusCurrentDate);
+      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);
+    const {
+      datePicker
+    } = this.state;
+    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
   }
+
   render() {
     const {
       numberOfMonths,
@@ -140,60 +210,68 @@ class DSDatePickerController extends React2.Component {
       key,
       calendarProps
     } = this.props;
-    const { datePicker, firstFocusableItem } = this.state;
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
     const safedate = this.getSafeValue();
     const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
-    return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", {
+    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
-    }, /* @__PURE__ */ React2.createElement(DayPickerSingleDateController, {
-      key,
-      date: safedate,
-      enableOutsideDays,
-      firstDayOfWeek,
-      focused: true,
-      hideKeyboardShortcutsPanel,
-      initialVisibleMonth: safeinitialMonth,
-      isDayBlocked,
-      isDayHighlighted,
-      isOutsideRange,
-      keepOpenOnDateSelect,
-      navNext: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
-        className: classNameElement("navigation-next")
-      }),
-      navPrev: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
-        className: classNameElement("navigation-prev"),
-        icon: ChevronLeft,
-        innerRef: firstFocusableItem
-      }),
-      renderMonthElement,
-      numberOfMonths,
-      onClose,
-      onDateChange: this.handleDateChange,
-      onNextMonthClick: this.handleNavClick("next"),
-      onOutsideClick,
-      onPrevMonthClick: this.handleNavClick("prev"),
-      phrases,
-      renderDayContents: (date) => /* @__PURE__ */ React2.createElement(DatePickerDay, {
-        className: classNameElement("day-contents"),
-        date: date.format(displayFormatDay)
-      }),
-      transitionDuration,
-      onTab: (e) => {
-        if (e.target.classList.contains("CalendarDay")) {
-          e.preventDefault();
-          onClose();
+      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: "",
+  date: '',
+  value: '',
   enableOutsideDays: false,
   initialVisibleMonth: moment(),
   firstDayOfWeek: 0,
@@ -206,38 +284,18 @@ DSDatePickerController.defaultProps = {
   onClickEscape: () => null,
   onDateChange: () => null,
   phrases: SingleDatePickerPhrases,
-  displayFormatDay: "D",
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
   transitionDuration: 0,
+  // verticalSpacing: 0,
   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,
-  displayFormatDay: PropTypes.string,
-  transitionDuration: PropTypes.number,
-  isDayBlocked: PropTypes.func,
-  isOutsideRange: PropTypes.func,
-  isDayHighlighted: PropTypes.func,
-  numberOfMonths: PropTypes.number
-};
 DSDatePickerController.defaultProps = {
-  date: "",
-  value: "",
+  date: '',
+  value: '',
   enableOutsideDays: false,
   initialVisibleMonth: moment(),
   firstDayOfWeek: 0,
@@ -279,15 +337,14 @@ DSDatePickerController.defaultProps = {
     dateIsUnavailable: PropTypes.func,
     dateIsSelected: PropTypes.func
   }),
-  displayFormatDay: "D",
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
   transitionDuration: 0,
+  // verticalSpacing: 0,
   isDayBlocked: () => false,
   isOutsideRange: () => false,
   isDayHighlighted: () => false,
   numberOfMonths: 1
 };
-export {
-  DSDatePickerController,
-  DSDatePickerController as default
-};
-//# sourceMappingURL=DatePickerController.js.map
+
+export { DSDatePickerController as default };

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -1,20 +1,18 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-const Day = ({ className = "date-picker-content-day", date = "" }) => /* @__PURE__ */ React2.createElement("div", {
-  className,
-  "data-testid": `datepicker-day-${date}`
-}, /* @__PURE__ */ React2.createElement("div", {
-  className: `${className}-half`,
-  "data-testid": "datepicker-day"
-}, date));
-Day.propTypes = {
-  className: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+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));
 };
-var DatePickerDay_default = Day;
-export {
-  Day as DatePickerDay,
-  DatePickerDay_default as default
-};
-//# sourceMappingURL=DatePickerDay.js.map
+
+export { Day as default };

package/esm/components/DatePickerDropdown.js

@@ -1,56 +1,57 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSPopper } from "@elliemae/ds-popper";
-import { DatePickerPicker, PickerPropsTypes } from "./DatePickerPicker/DatePickerPicker";
-const { classNameElement } = convertPropToCssClassName("datepicker-range");
+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-popper';
+import { Picker } from './DatePickerPicker/DatePickerPicker.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
+} = convertPropToCssClassName('datepicker-range');
+
 const noop = () => null;
-function DatePickerDropdown({
-  disabled = false,
-  readOnly,
-  onClick = noop,
-  isOpen,
-  menu,
-  zIndex = 1,
-  pickerProps,
-  pickerRef
-}) {
-  return /* @__PURE__ */ React2.createElement(DSPopper, {
-    contentComponent: menu,
+
+function DatePickerDropdown(_ref) {
+  let {
+    disabled = false,
+    readOnly,
+    onClick = noop,
     isOpen,
+    menu,
+    zIndex = 1,
+    pickerProps,
+    pickerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSPopper, {
+    contentComponent: menu,
+    isOpen: isOpen,
     modifiers: {
       preventOverflow: {
         enabled: true,
         padding: 0,
-        boundariesElement: "window"
+        boundariesElement: 'window'
       }
     },
     showArrow: false,
-    triggerComponent: /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(DatePickerPicker, {
-      innerRef: pickerRef,
-      ...pickerProps,
-      className: classNameElement("picker"),
-      disabled,
-      onClick,
-      readOnly
-    })),
-    zIndex
+    triggerComponent: /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Picker, _objectSpread(_objectSpread({
+      innerRef: pickerRef
+    }, pickerProps), {}, {
+      className: classNameElement('picker'),
+      disabled: disabled,
+      onClick: onClick,
+      readOnly: readOnly
+    }))),
+    zIndex: zIndex
   });
 }
-DatePickerDropdown.propTypes = {
-  pickerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  onClick: PropTypes.func,
-  isOpen: PropTypes.bool,
-  menu: PropTypes.element,
-  zIndex: PropTypes.number,
-  pickerProps: PropTypes.shape(PickerPropsTypes)
-};
-var DatePickerDropdown_default = DatePickerDropdown;
-export {
-  DatePickerDropdown,
-  DatePickerDropdown_default as default
-};
-//# sourceMappingURL=DatePickerDropdown.js.map
+
+export { DatePickerDropdown as default };