@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/controlled-date-range-picker/ControlledDateRangePickerDatatestid.js

@@ -1,22 +1,5 @@
 const ControlledDateRangePickerDatatestid = {
-  FROM_DATE_INPUTS: {
-    MONTH: 'ds-controlled-date-range-picker-from-month-input',
-    DAY: 'ds-controlled-date-range-picker-from-day-input',
-    YEAR: 'ds-controlled-date-range-picker-from-year-input'
-  },
-  TO_DATE_INPUTS: {
-    MONTH: 'ds-controlled-date-range-picker-to-month-input',
-    DAY: 'ds-controlled-date-range-picker-to-day-input',
-    YEAR: 'ds-controlled-date-range-picker-to-year-input'
-  },
-  PICKER_ICON: 'ds-controlled-date-range-picker-calendar-trigger-icon',
-  CALENDAR: {
-    DAY: 'ds-controlled-date-range-picker-calendar-day',
-    FROM_DAY: 'ds-controlled-date-range-picker-calendar-from-day',
-    TO_DAY: 'ds-controlled-date-range-picker-calendar-to-day'
-  },
-  FROM_CLEAR_BUTTON: 'ds-controlled-date-range-picker-from-clear-btn',
-  TO_CLEAR_BUTTON: 'ds-controlled-date-range-picker-to-clear-btn'
+  WRAPPER: 'ds-controlled-date-range-picker-wrapper'
 };
 
 export { ControlledDateRangePickerDatatestid };

package/esm/controlled-date-range-picker/config/useControlledDateRangePicker.js

@@ -1,13 +1,23 @@
+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 { useMemo } from 'react';
 import { uid } from 'uid';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useRangePickerLogic } from './useRangePickerLogic.js';
 import { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';
 
-/* eslint-disable max-lines */
+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 useControlledDateRangePicker = props => {
   const instanceUID = useMemo(() => uid(6), []);
   const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type
   } = propsWithDefaults;
@@ -16,13 +26,15 @@ const useControlledDateRangePicker = props => {
   const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;
   const rangePickerLogic = useRangePickerLogic(propsWithDefaults);
   const ctx = useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     instanceUID,
     rangePickerLogic,
     withInputs,
     withIcon,
     isControllerOnly
-  }), [instanceUID, isControllerOnly, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
   return ctx;
 };
 

package/esm/controlled-date-range-picker/config/useRangePickerLogic.js

@@ -1,24 +1,33 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import '../../controlled-date-time-picker/ControlledDateTimePicker.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/es.string.replace.js';
 import { getDayFromDateString } from '../../controlled-date-time-picker/utils/dateHelpers.js';
 
 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 useRangePickerLogic = ({
-  fromDate,
-  onFromDateChange,
-  onMonthFromChange,
-  onDayFromChange,
-  onYearFromChange,
-  toDate,
-  onMonthToChange,
-  onDayToChange,
-  onYearToChange,
-  onToDateChange
-}) => {
+const useRangePickerLogic = _ref => {
+  let {
+    fromDate,
+    onFromDateChange,
+    onMonthFromChange,
+    onDayFromChange,
+    onYearFromChange,
+    toDate,
+    onMonthToChange,
+    onDayToChange,
+    onYearToChange,
+    onToDateChange
+  } = _ref;
   // the implementation is based on controlled-date-time-picker that is not meant to "understand"
   // the "from" - "to" logic on click, we are "overloading" the "from" - "to" logic here
   // we track wheter we are going to set the "from" OR "to" controlled date based on this toggle

package/esm/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -2,7 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+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 '@babel/runtime/helpers/esm/defineProperty';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 

package/esm/controlled-date-range-picker/parts/ControlledDateRangeContent.js

@@ -1,3 +1,9 @@
+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 { useContext } from 'react';
 import styled from 'styled-components';
@@ -5,21 +11,39 @@ import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCT
 import { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate.js';
 import { ControlledDateRangeToDate } from './ControlledDateRangeToDate.js';
 import { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar.js';
+import { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
 var _ControlledDateRangeF, _ControlledDateRangeT, _ControlledDateRangeC;
+
+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 StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-e4pfvj-0"
-})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;gap:0px 8px;grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"]);
+})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], _ref => {
+  let {
+    isControllerOnly
+  } = _ref;
+  return isControllerOnly ? undefined : 'gap: 0px 8px;';
+});
 const ControlledDateRangeContent = () => {
   const {
+    props: {
+      dataAttrs
+    },
     withIcon,
     withInputs,
     isControllerOnly
   } = useContext(ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx(StyledWrapper, {}, void 0, withInputs ? /*#__PURE__*/jsxs(Fragment, {
-    children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
-  }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null);
+  return /*#__PURE__*/jsxs(StyledWrapper, _objectSpread(_objectSpread({
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateRangePickerDatatestid.WRAPPER
+  }, dataAttrs), {}, {
+    children: [withInputs ? /*#__PURE__*/jsxs(Fragment, {
+      children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
+    }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null]
+  }));
 };
 
 export { ControlledDateRangeContent };

package/esm/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -3,7 +3,15 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+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 '@babel/runtime/helpers/esm/defineProperty';
 
 const ControlledDateRangeFromDate = () => {
@@ -16,7 +24,8 @@ const ControlledDateRangeFromDate = () => {
       isClearable,
       getIsDisabledDay,
       getIsOutOfRangeDay,
-      hasError
+      hasError,
+      autoFocus
     },
     rangePickerLogic: {
       handleFromDateChange
@@ -32,7 +41,8 @@ const ControlledDateRangeFromDate = () => {
     isClearable: isClearable,
     getIsDisabledDay: getIsDisabledDay,
     getIsOutOfRangeDay: getIsOutOfRangeDay,
-    hasError: hasError
+    hasError: hasError,
+    autoFocus: autoFocus
   });
 };
 

package/esm/controlled-date-range-picker/parts/ControlledDateRangeToDate.js

@@ -3,7 +3,15 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+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 '@babel/runtime/helpers/esm/defineProperty';
 
 const ControlledDateRangeToDate = () => {

package/esm/controlled-date-time-picker/ControlledDateTimePickerCTX.js

@@ -9,6 +9,7 @@ const defaultReturnFalse = () => false; // const mockedStringStateSetter: React.
 
 const mockedSetLatestInteractionRegion = noop;
 const defaultProps = {
+  // changing default type requires changing default booleans (hideDate, withAnyInputs, etc...) in the context too
   type: CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL,
   dateTime: '',
   date: '',
@@ -35,7 +36,9 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   minutesInterval: 1,
   isClearable: false,
+  disabled: false,
   hasError: false,
+  autoFocus: false,
   preventCloseOnSelection: false,
   pickerFooterMsg: undefined
 };
@@ -64,6 +67,9 @@ const defaultContext = {
   prevMeridiemBtnRef: /*#__PURE__*/createRef(),
   currMeridiemBtnRef: /*#__PURE__*/createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/createRef(),
+  firstSegmentRef: /*#__PURE__*/createRef(),
+  lastSegmentRef: /*#__PURE__*/createRef(),
+  ariaCurrentValueForInputs: '',
   dateStringFromProps: '',
   tempDateString: '__/__/____',
   // setDateString: mockedStringStateSetter,
@@ -72,6 +78,12 @@ const defaultContext = {
   handleChangeComposedDateTimeString: noop,
   handleChangeComposedDateString: noop,
   handleChangeComposedTimeString: noop,
+  handleChangeMonth: noop,
+  handleChangeDay: noop,
+  handleChangeYear: noop,
+  handleChangeHours: noop,
+  handleChangeMinutes: noop,
+  handleChangeMeridiem: noop,
   handleClearAll: noop,
   hideDate: false,
   hideTime: false,
@@ -88,9 +100,18 @@ const defaultContext = {
   isControllerOnly: false,
   isWithTimeWheelToo: true,
   isWithCalendarToo: true,
+  isWithDateInputs: true,
+  isWithDateInputsOnly: false,
+  isWithTimeInputs: true,
+  isWithTimeInputsOnly: false,
+  autoFocusMonthInput: false,
+  autoFocusHourInput: false,
+  autoFocusPrevMonthArrow: false,
+  autoFocusHourTimeWheel: false,
   shouldPreserveClearableSpace: false,
   latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion
+  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
+  onGlobalKeyDown: noop
 };
 /** Context for cross component communication */
 

package/esm/controlled-date-time-picker/ControlledDateTimePickerDatatestid.js

@@ -15,16 +15,43 @@ const ControlledDateTimePickerDatatestid = {
     CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon'
   },
   CALENDAR: {
+    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',
+    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',
     DAY: 'ds-controlled-date-time-picker-calendar-day',
-    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day'
+    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',
+    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',
+    // <-nuevo
+    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',
+    // <-nuevo
+    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',
+    SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',
+    SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',
+    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',
+    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year'
   },
   TIMEWHEEL: {
+    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',
     HOUR: 'ds-controlled-date-time-picker-timewheel-hour',
-    SELECTED_HOUR: 'ds-controlled-date-time-picker-timewheel-selected-hour',
+    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',
+    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',
+    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',
     MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',
-    SELECTED_MINUTE: 'ds-controlled-date-time-picker-timewheel-selected-minute',
+    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',
+    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',
+    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',
     MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',
-    SELECTED_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-selected-meridiem'
+    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',
+    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem'
+  },
+  CONTEXTUAL_MENU: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper'
+  },
+  CONTROLLER_COMPONENT: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper'
   },
   CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn'
 };