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

package/esm/components/DatePickerDropdown.js

@@ -1,35 +1,37 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
+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 { PickerPropsTypes, Picker } from './DatePickerPicker/DatePickerPicker.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@elliemae/ds-icon';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import '../prop-types-578e866b.js';
+import { Picker } from './DatePickerPicker/DatePickerPicker.js';
+import { jsx } from 'react/jsx-runtime';
 
-var _convertPropToCssClas = convertPropToCssClassName('datepicker-range'),
-    classNameElement = _convertPropToCssClas.classNameElement;
+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; }
 
-var noop = function noop() {
-  return null;
-};
+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
+} = convertPropToCssClassName('datepicker-range');
+
+const noop = () => null;
 
 function DatePickerDropdown(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      readOnly = _ref.readOnly,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
-      isOpen = _ref.isOpen,
-      menu = _ref.menu,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
-      pickerProps = _ref.pickerProps,
-      pickerRef = _ref.pickerRef;
-  return /*#__PURE__*/React.createElement(DSPopper, {
+  let {
+    disabled = false,
+    readOnly,
+    onClick = noop,
+    isOpen,
+    menu,
+    zIndex = 1,
+    pickerProps,
+    pickerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: menu,
     isOpen: isOpen,
     modifiers: {
@@ -40,9 +42,9 @@ function DatePickerDropdown(_ref) {
       }
     },
     showArrow: false,
-    triggerComponent: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Picker, _extends({
+    triggerComponent: /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Picker, _objectSpread(_objectSpread({
       innerRef: pickerRef
-    }, pickerProps, {
+    }, pickerProps), {}, {
       className: classNameElement('picker'),
       disabled: disabled,
       onClick: onClick,
@@ -52,18 +54,4 @@ function DatePickerDropdown(_ref) {
   });
 }
 
-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)
-};
-
 export { DatePickerDropdown as default };
-//# sourceMappingURL=DatePickerDropdown.js.map

package/esm/components/DatePickerHeader/DatePickerHeader.js

@@ -1,50 +1,42 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+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 { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
-var DATE_FORMAT = 'MMDDYYYY';
-var blockname = 'date-picker-header';
-var Header = aggregatedClasses('div')(blockname);
+const DATE_FORMAT = 'MMDDYYYY';
+const blockname = 'date-picker-header';
+const Header = aggregatedClasses('div')(blockname);
 
-var isFn = function isFn(variable) {
-  return typeof variable === 'function';
-};
-
-var DatePickerHeader = function DatePickerHeader(_ref) {
-  var _ref$onInputChange = _ref.onInputChange,
-      onInputChange = _ref$onInputChange === void 0 ? function () {
-    return null;
-  } : _ref$onInputChange,
-      selectedDate = _ref.selectedDate,
-      updateKeyDate = _ref.updateKeyDate;
-
-  var _useState = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+const isFn = variable => typeof variable === 'function';
 
-  useEffect(function () {
+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)) {
       setValue(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format(DATE_FORMAT));
     }
   }, [selectedDate]);
 
-  var handleOnChange = function handleOnChange(newDate) {
+  const handleOnChange = newDate => {
     setValue(newDate);
   };
 
-  var handleOnKeyDown = function handleOnKeyDown(e) {
+  const handleOnKeyDown = e => {
     if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {
-      var momentValue = moment(value, DATE_FORMAT);
+      const momentValue = moment(value, DATE_FORMAT);
       onInputChange(momentValue);
       updateKeyDate(momentValue);
     }
   };
 
-  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DSInputGroup, null, /*#__PURE__*/React.createElement(DSDateInputV2, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     value: value,
@@ -54,11 +46,4 @@ var DatePickerHeader = function DatePickerHeader(_ref) {
   })));
 };
 
-DatePickerHeader.propTypes = {
-  onInputChange: PropTypes.func,
-  selectedDate: PropTypes.any,
-  updateKeyDate: PropTypes.any
-};
-
 export { DatePickerHeader as default };
-//# sourceMappingURL=DatePickerHeader.js.map

package/esm/components/DatePickerNavigation/DatePickerNavigation.js

@@ -1,23 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ChevronRight } from '@elliemae/ds-icons';
-import { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';
-import { a as iconColors, i as iconSizes } from '../../prop-types-578e866b.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import ChevronRight from '@elliemae/ds-icons/ChevronRight';
+import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
 
-var Navigation = function Navigation(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? 'date-picker-navigation' : _ref$className,
-      _ref$icon = _ref.icon,
-      Icon = _ref$icon === void 0 ? ChevronRight : _ref$icon,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? DSIconColors.NEUTRAL : _ref$color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? DSIconSizes.S : _ref$size,
-      innerRef = _ref.innerRef;
-  return /*#__PURE__*/React.createElement("div", {
+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"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, void 0, /*#__PURE__*/_jsx(Icon, {
     className: className,
     color: color,
     innerRef: innerRef,
@@ -25,13 +22,4 @@ var Navigation = function Navigation(_ref) {
   }));
 };
 
-Navigation.propTypes = {
-  className: 'date-picker-navigation',
-  icon: PropTypes.element,
-  color: PropTypes.oneOf(iconColors),
-  size: PropTypes.oneOf(iconSizes),
-  innerRef: PropTypes.any
-};
-
 export { Navigation as default };
-//# sourceMappingURL=DatePickerNavigation.js.map

package/esm/components/DatePickerPicker/DatePickerPicker.js

@@ -1,39 +1,31 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React from 'react';
+import 'react';
 import PropTypes from 'prop-types';
-import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
-import { DatePicker } from '@elliemae/ds-icons';
+import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
+import DatePicker from '@elliemae/ds-icons/DatePicker';
 import DSButton, { buttonTypes } from '@elliemae/ds-button';
-import { i as iconSizes } from '../../prop-types-578e866b.js';
+import { iconSizes } from '@elliemae/ds-shared/prop-types';
 
-var _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
-var Picker = function Picker(_ref) {
-  var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? 'date-picker-icon' : _ref$className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(DatePicker, null) : _ref$icon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? DSIconSizes.M : _ref$size,
-      _ref$buttonActionType = _ref.buttonActionType,
-      buttonActionType = _ref$buttonActionType === void 0 ? 'secondary' : _ref$buttonActionType,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {
-    return null;
-  } : _ref$onClick,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {
-    return null;
-  } : _ref$onBlur,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      innerRef = _ref.innerRef,
+var _DatePicker;
+
+const _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
+const Picker = _ref => {
+  let {
+    className = 'date-picker-icon',
+    disabled = false,
+    icon = _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
+    size = DSIconSizes.M,
+    buttonActionType = 'secondary',
+    onClick = () => null,
+    onBlur = () => null,
+    readOnly = false,
+    tabIndex = 0,
+    innerRef
+  } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(DSButton, {
+  return /*#__PURE__*/_jsx(DSButton, {
     innerRef: innerRef,
     "aria-label": rest['aria-label'] || 'Date Picker Button',
     buttonType: buttonActionType,
@@ -49,7 +41,7 @@ var Picker = function Picker(_ref) {
     "data-testid": "btn-date-picker"
   });
 };
-var PickerPropsTypes = {
+const PickerPropsTypes = {
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
@@ -64,7 +56,5 @@ var PickerPropsTypes = {
   readOnly: PropTypes.bool,
   tabIndex: PropTypes.number
 };
-Picker.propTypes = PickerPropsTypes;
 
 export { Picker, PickerPropsTypes, Picker as default };
-//# sourceMappingURL=DatePickerPicker.js.map

package/esm/components/DatePickerRange/DatePickerRange.js

@@ -1,6 +1,12 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef } from 'react';
+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 { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
@@ -8,112 +14,98 @@ 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 'prop-types';
-import '@elliemae/ds-icon';
-import '../../prop-types-578e866b.js';
-import '@elliemae/ds-form';
-
-var blockname = 'date-range';
-var Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
-
-var _convertPropToCssClas = convertPropToCssClassName('datepicker'),
-    classNameElement = _convertPropToCssClas.classNameElement,
-    classNameBlock = _convertPropToCssClas.classNameBlock;
-
-var START_DATE = 'startDate';
-var END_DATE = 'endDate';
-
-var DatePickerRangeDate = function DatePickerRangeDate(_ref) {
-  var dateStart = _ref.dateStart,
-      dateEnd = _ref.dateEnd,
-      _ref$displayFormatDay = _ref.displayFormatDay,
-      displayFormatDay = _ref$displayFormatDay === void 0 ? 'D' : _ref$displayFormatDay,
-      _ref$showHeader = _ref.showHeader,
-      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
-      otherProps = _ref.otherProps;
-
-  var _useState = useState(dateStart),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedDateStart = _useState2[0],
-      setSelectedDateStart = _useState2[1];
-
-  var _useState3 = useState(dateEnd),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedDateEnd = _useState4[0],
-      setSelectedDateEnd = _useState4[1];
-
-  var _useState5 = useState(START_DATE),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focusedInput = _useState6[0],
-      setFocusedInput = _useState6[1];
-
-  var datePickerRef = useRef();
-
-  var handleFocusChange = function handleFocusChange() {
+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; }
+
+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 blockname = 'date-range';
+const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
+const {
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('datepicker');
+const START_DATE = 'startDate';
+const END_DATE = 'endDate';
+
+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);
+  const datePickerRef = useRef();
+
+  const handleFocusChange = () => {
     setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
   };
 
-  var handleDatesChange = function handleDatesChange(_ref2) {
-    var startDate = _ref2.startDate,
-        endDate = _ref2.endDate;
+  const handleDatesChange = _ref2 => {
+    let {
+      startDate,
+      endDate
+    } = _ref2;
     setSelectedDateStart(startDate);
     setSelectedDateEnd(endDate);
   };
 
-  var handleStartInputChange = function handleStartInputChange(newDate) {
+  const handleStartInputChange = newDate => {
     setSelectedDateStart(newDate);
   };
 
-  var handleEndInputChange = function handleEndInputChange(newDate) {
+  const handleEndInputChange = newDate => {
     setSelectedDateEnd(newDate);
   };
 
-  var getSafeDateStartValue = function getSafeDateStartValue() {
+  const getSafeDateStartValue = () => {
     if (selectedDateStart) {
       return moment(selectedDateStart);
     }
   };
 
-  var getSafeDateEndValue = function getSafeDateEndValue() {
+  const getSafeDateEndValue = () => {
     if (selectedDateEnd) {
       return moment(selectedDateEnd);
     }
   };
 
-  var safeStartDate = getSafeDateStartValue();
-  var safeEndDate = getSafeDateEndValue();
-  return /*#__PURE__*/React.createElement(Wrapper, null, showHeader && /*#__PURE__*/React.createElement(DatePickerRangeHeader, {
+  const safeStartDate = getSafeDateStartValue();
+  const safeEndDate = getSafeDateEndValue();
+  return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerRangeHeader, {
     onEndInputChange: handleEndInputChange,
     onStartInputChange: handleStartInputChange,
     selectedEndDate: safeEndDate,
     selectedStartDate: safeStartDate
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/jsx("div", {
     ref: datePickerRef,
-    className: classNameBlock('wrapper-day-picker-single-date-controller')
-  }, /*#__PURE__*/React.createElement(DayPickerRangeController, _extends({}, otherProps, {
-    enableOutsideDays: true,
-    endDate: safeEndDate,
-    focused: true,
-    focusedInput: focusedInput,
-    hideKeyboardShortcutsPanel: true,
-    navNext: /*#__PURE__*/React.createElement(Navigation, {
-      className: classNameElement('navigation-next')
-    }),
-    navPrev: /*#__PURE__*/React.createElement(Navigation, {
-      className: classNameElement('navigation-prev'),
-      icon: ChevronLeft
-    }),
-    onDatesChange: handleDatesChange,
-    onFocusChange: handleFocusChange,
-    renderDayContents: function renderDayContents(date) {
-      return /*#__PURE__*/React.createElement(Day, {
+    className: classNameBlock('wrapper-day-picker-single-date-controller'),
+    children: /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
+      enableOutsideDays: true,
+      endDate: safeEndDate,
+      focused: true,
+      focusedInput: focusedInput,
+      hideKeyboardShortcutsPanel: true,
+      navNext: /*#__PURE__*/_jsx(Navigation, {
+        className: classNameElement('navigation-next')
+      }),
+      navPrev: /*#__PURE__*/_jsx(Navigation, {
+        className: classNameElement('navigation-prev'),
+        icon: ChevronLeft
+      }),
+      onDatesChange: handleDatesChange,
+      onFocusChange: handleFocusChange,
+      renderDayContents: date => /*#__PURE__*/_jsx(Day, {
         className: classNameElement('day-contents'),
         date: date.format(displayFormatDay)
-      });
-    },
-    startDate: safeStartDate
-  }))));
+      }),
+      startDate: safeStartDate
+    }))
+  }));
 };
 
 export { DatePickerRangeDate as default };
-//# sourceMappingURL=DatePickerRange.js.map