@elliemae/ds-date-picker 2.0.0-next.6 → 2.0.0-rc.1

package/esm/components/DatePickerRange/DatePickerRange.js

@@ -1,12 +1,19 @@
+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 { DatePickerRangeHeader, DatePickerNavigation, DatePickerDay } from '@elliemae/ds-date-picker';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
 import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
+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 { 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; }
@@ -21,13 +28,14 @@ const {
 const START_DATE = 'startDate';
 const END_DATE = 'endDate';
 
-const DatePickerRangeDate = ({
-  dateStart,
-  dateEnd,
-  displayFormatDay = 'D',
-  showHeader = true,
-  otherProps
-}) => {
+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);
@@ -37,10 +45,11 @@ const DatePickerRangeDate = ({
     setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
   };
 
-  const handleDatesChange = ({
-    startDate,
-    endDate
-  }) => {
+  const handleDatesChange = _ref2 => {
+    let {
+      startDate,
+      endDate
+    } = _ref2;
     setSelectedDateStart(startDate);
     setSelectedDateEnd(endDate);
   };
@@ -81,16 +90,16 @@ const DatePickerRangeDate = ({
       focused: true,
       focusedInput: focusedInput,
       hideKeyboardShortcutsPanel: true,
-      navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navNext: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-next')
       }),
-      navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navPrev: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-prev'),
         icon: ChevronLeft
       }),
       onDatesChange: handleDatesChange,
       onFocusChange: handleFocusChange,
-      renderDayContents: date => /*#__PURE__*/_jsx(DatePickerDay, {
+      renderDayContents: date => /*#__PURE__*/_jsx(Day, {
         className: classNameElement('day-contents'),
         date: date.format(displayFormatDay)
       }),

package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -2,8 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect } from 'react';
 import moment from 'moment';
-import DSDateInput from '@elliemae/ds-basic/form/DateInputV2';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const blockname = 'date-range-picker';
@@ -12,21 +11,25 @@ const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the us
 // to be higher than 999
 
 const MAGIC_NUMBER = 999;
-const Header = aggregatedClasses('div')(blockname, 'header', ({
-  invalidDate
-}) => ({
-  invalidDate
-}));
-
-const DatePickerRangeHeader = ({
-  onStartInputChange = () => null,
-  onEndInputChange = () => null,
-  onFocusChange = () => null,
-  selectedStartDate,
-  selectedEndDate,
-  handleDatesChange,
-  autoJumpOnEdit = true
-}) => {
+const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
+  let {
+    invalidDate
+  } = _ref;
+  return {
+    invalidDate
+  };
+});
+
+const DatePickerRangeHeader = _ref2 => {
+  let {
+    onStartInputChange = () => null,
+    onEndInputChange = () => null,
+    onFocusChange = () => null,
+    selectedStartDate,
+    selectedEndDate,
+    handleDatesChange,
+    autoJumpOnEdit = true
+  } = _ref2;
   const [startValue, setStartValue] = useState(selectedStartDate);
   const [endValue, setEndValue] = useState(selectedEndDate);
   const startInputRef = useRef();
@@ -110,7 +113,7 @@ const DatePickerRangeHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInput, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'start-date'
     },
@@ -119,7 +122,7 @@ const DatePickerRangeHeader = ({
     onFocus: () => handleOnFocus('startDate'),
     onKeyDown: handleOnKeyDownStart,
     value: startValue
-  }), /*#__PURE__*/_jsx(DSDateInput, {
+  }), /*#__PURE__*/_jsx(DSDateInputV2, {
     containerProps: {
       'data-testid': 'end-date'
     },

package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js

@@ -1,36 +1,38 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import ChevronDoubleLeft from '@elliemae/ds-icons/ChevronDoubleLeft';
-import ChevronDoubleRight from '@elliemae/ds-icons/ChevronDoubleRight';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { ChevronDoubleLeft, ChevronDoubleRight } from '@elliemae/ds-icons';
+import { Grid } from '@elliemae/ds-grid';
 
 var _ChevronDoubleLeft, _ChevronDoubleRight;
-const renderMonthElement = ({
-  month,
-  onYearSelect
-}) => /*#__PURE__*/_jsx(Grid, {
-  height: "20px",
-  cols: ['auto', 1, 'auto'],
-  alignItems: "flex-end",
-  mr: "10px"
-}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
-  role: "button",
-  tabIndex: "0",
-  "data-testid": "date-picker-prev-year-arrow",
-  onClick: () => onYearSelect(month, month.year() - 1)
-}, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
-  width: 13.6,
-  height: 13.6
-})))), /*#__PURE__*/_jsx(Grid, {
-  "data-testid": "date-picker-header"
-}, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
-  role: "button",
-  tabIndex: "0",
-  "data-testid": "date-picker-next-year-arrow",
-  onClick: () => onYearSelect(month, month.year() + 1)
-}, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
-  width: 13.6,
-  height: 13.6
-})))));
+const renderMonthElement = _ref => {
+  let {
+    month,
+    onYearSelect
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
+    height: "20px",
+    cols: ['auto', 1, 'auto'],
+    alignItems: "flex-end",
+    mr: "10px"
+  }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
+    role: "button",
+    tabIndex: "0",
+    "data-testid": "date-picker-prev-year-arrow",
+    onClick: () => onYearSelect(month, month.year() - 1)
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
+    width: 13.6,
+    height: 13.6
+  })))), /*#__PURE__*/_jsx(Grid, {
+    "data-testid": "date-picker-header"
+  }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
+    role: "button",
+    tabIndex: "0",
+    "data-testid": "date-picker-next-year-arrow",
+    onClick: () => onYearSelect(month, month.year() + 1)
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
+    width: 13.6,
+    height: 13.6
+  })))));
+};
 
 export { renderMonthElement };

package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js

@@ -4,9 +4,11 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef } from 'react';
 import { DayPickerSingleDateController } from 'react-dates';
 import moment from 'moment';
-import { DatePickerHeader, DatePickerNavigation, DatePickerDay } from '@elliemae/ds-date-picker';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
 import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import Day from '../DatePickerDay/DatePickerDay.js';
+import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
+import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
@@ -56,15 +58,15 @@ const DatePickerSingleDate = _ref => {
       hideKeyboardShortcutsPanel: true,
       isDayHighlighted: isDayHighlighted,
       keepOpenOnDateSelect: true,
-      navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navNext: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-next')
       }),
-      navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
+      navPrev: /*#__PURE__*/_jsx(Navigation, {
         className: classNameElement('navigation-prev'),
         icon: ChevronLeft
       }),
       onDateChange: handleDateChange,
-      renderDayContents: givenDate => /*#__PURE__*/_jsx(DatePickerDay, {
+      renderDayContents: givenDate => /*#__PURE__*/_jsx(Day, {
         className: classNameElement('day-contents'),
         date: givenDate.format(displayFormatDay)
       })

package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js

@@ -1,26 +1,29 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
-import { DatePickerHeader, DatePickerRangeHeader } from '@elliemae/ds-date-picker';
+import { DSCheckbox } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
+import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
 
 const blockname = 'date-switcher';
 const Header = aggregatedClasses('div')(blockname, 'header');
 
-const SingleRangeDateSwitcher = ({
-  onStartInputChange,
-  onEndInputChange,
-  onSingleInputChange,
-  onFocusChange,
-  selectedStartDate,
-  selectedEndDate,
-  selectedSingleDate,
-  isDateRange,
-  setIsDateRange,
-  handleDatesChange,
-  updateKeyDate,
-  focusedInput
-}) => {
+const SingleRangeDateSwitcher = _ref => {
+  let {
+    onStartInputChange,
+    onEndInputChange,
+    onSingleInputChange,
+    onFocusChange,
+    selectedStartDate,
+    selectedEndDate,
+    selectedSingleDate,
+    isDateRange,
+    setIsDateRange,
+    handleDatesChange,
+    updateKeyDate,
+    focusedInput
+  } = _ref;
+
   const SingleDateInput = /*#__PURE__*/_jsx(DatePickerHeader, {
     onInputChange: onSingleInputChange,
     selectedDate: selectedSingleDate,

package/esm/defaultPhrases.js

@@ -26,33 +26,54 @@ const returnFocusToInput = 'Return to the date input field.';
 const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
 const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
 
-const chooseAvailableStartDate = ({
-  date
-}) => "Choose ".concat(date, " as your check-in date. It\u2019s available.");
+const chooseAvailableStartDate = _ref => {
+  let {
+    date
+  } = _ref;
+  return "Choose ".concat(date, " as your check-in date. It\u2019s available.");
+};
 
-const chooseAvailableEndDate = ({
-  date
-}) => "Choose ".concat(date, " as your check-out date. It\u2019s available.");
+const chooseAvailableEndDate = _ref2 => {
+  let {
+    date
+  } = _ref2;
+  return "Choose ".concat(date, " as your check-out date. It\u2019s available.");
+};
 
-const chooseAvailableDate = ({
-  date
-}) => date;
+const chooseAvailableDate = _ref3 => {
+  let {
+    date
+  } = _ref3;
+  return date;
+};
 
-const dateIsUnavailable = ({
-  date
-}) => "Not available. ".concat(date);
+const dateIsUnavailable = _ref4 => {
+  let {
+    date
+  } = _ref4;
+  return "Not available. ".concat(date);
+};
 
-const dateIsSelected = ({
-  date
-}) => "Selected. ".concat(date);
+const dateIsSelected = _ref5 => {
+  let {
+    date
+  } = _ref5;
+  return "Selected. ".concat(date);
+};
 
-const dateIsSelectedAsStartDate = ({
-  date
-}) => "Selected as start date. ".concat(date);
+const dateIsSelectedAsStartDate = _ref6 => {
+  let {
+    date
+  } = _ref6;
+  return "Selected as start date. ".concat(date);
+};
 
-const dateIsSelectedAsEndDate = ({
-  date
-}) => "Selected as end date. ".concat(date);
+const dateIsSelectedAsEndDate = _ref7 => {
+  let {
+    date
+  } = _ref7;
+  return "Selected as end date. ".concat(date);
+};
 
 var defaultPhrases = {
   calendarLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-date-picker",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Date Picker",
   "module": "./esm/index.js",
@@ -92,13 +92,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.6",
-    "@elliemae/ds-classnames": "2.0.0-next.6",
-    "@elliemae/ds-form": "2.0.0-next.6",
+    "@elliemae/ds-basic": "2.0.0-rc.1",
+    "@elliemae/ds-classnames": "2.0.0-rc.1",
+    "@elliemae/ds-form": "2.0.0-rc.1",
+    "@elliemae/ds-icons": "2.0.0-rc.1",
+    "@elliemae/ds-system": "2.0.0-rc.1",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
     "react-dates": "~21.8.0",
-    "react-text-mask": "~5.4.3"
+    "react-desc": "~4.1.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

package/types/components/DatePickerDropdown.d.ts

@@ -29,7 +29,7 @@ declare namespace DatePickerDropdown {
             disabled: PropTypes.Requireable<boolean>;
             icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
             size: PropTypes.Requireable<unknown>;
-            buttonActionType: PropTypes.Requireable<unknown>;
+            buttonActionType: PropTypes.Requireable<string>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
             onFocus: PropTypes.Requireable<(...args: any[]) => any>;
             onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/types/components/DatePickerHeader/DatePickerHeader.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
 declare const DatePickerHeader: {
-    ({ onInputChange, selectedDate, updateKeyDate, }: {
+    ({ onInputChange, selectedDate, updateKeyDate }: {
         onInputChange?: (() => null) | undefined;
         selectedDate: any;
         updateKeyDate: any;

package/types/components/DatePickerPicker/DatePickerPicker.d.ts

@@ -22,7 +22,7 @@ export declare const Picker: {
         disabled: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
         size: PropTypes.Requireable<unknown>;
-        buttonActionType: PropTypes.Requireable<unknown>;
+        buttonActionType: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
@@ -38,7 +38,7 @@ export declare const PickerPropsTypes: {
     disabled: PropTypes.Requireable<boolean>;
     icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
     size: PropTypes.Requireable<unknown>;
-    buttonActionType: PropTypes.Requireable<unknown>;
+    buttonActionType: PropTypes.Requireable<string>;
     onClick: PropTypes.Requireable<(...args: any[]) => any>;
     onFocus: PropTypes.Requireable<(...args: any[]) => any>;
     onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/types/components/DatePickerRange/DatePickerRange.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const DatePickerRangeDate: ({ dateStart, dateEnd, displayFormatDay, showHeader, otherProps, }: {
+declare const DatePickerRangeDate: ({ dateStart, dateEnd, displayFormatDay, showHeader, otherProps }: {
     dateStart: any;
     dateEnd: any;
     displayFormatDay?: string | undefined;