@elliemae/ds-controlled-form 2.0.0-alpha.10 → 2.0.0-alpha.14

package/esm/controlled-checkbox/styles.js

@@ -3,59 +3,95 @@ import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js'
 
 const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-349ih4-0"
-})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], ({
-  theme
-}) => theme.space.xs);
+})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.xs;
+});
 const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-349ih4-1"
-})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => theme.space.xs, ({
-  theme,
-  hasError
-}) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400], ({
-  theme,
-  disabled
-}) => handleBackgroundColor(theme, disabled), ({
-  theme,
-  checked,
-  disabled,
-  readOnly,
-  hasError
-}) => handleCheckmark(theme, checked, disabled, readOnly, hasError), ({
-  theme,
-  hasError,
-  disabled
-}) => !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[600]} ` : undefined, ({
-  theme,
-  checked,
-  disabled,
-  readOnly,
-  hasError
-}) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true), ({
-  theme,
-  checked,
-  disabled
-}) => !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined, ({
-  theme,
-  hasError,
-  disabled,
-  readOnly
-}) => !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined);
+})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space.xs;
+}, _ref4 => {
+  let {
+    theme,
+    hasError
+  } = _ref4;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+}, _ref5 => {
+  let {
+    theme,
+    disabled
+  } = _ref5;
+  return handleBackgroundColor(theme, disabled);
+}, _ref6 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref6;
+  return handleCheckmark(theme, checked, disabled, readOnly, hasError);
+}, _ref7 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref7;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+}, _ref8 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref8;
+  return handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
+}, _ref9 => {
+  let {
+    theme,
+    checked,
+    disabled
+  } = _ref9;
+  return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
+}, _ref10 => {
+  let {
+    theme,
+    hasError,
+    disabled,
+    readOnly
+  } = _ref10;
+  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
+});
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-349ih4-2"
-})(["&:hover{cursor:pointer;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
+})(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
 const StyledLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "sc-349ih4-3"
-})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme,
-  disabled,
-  readOnly,
-  checked
-}) => disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]);
+})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xxs;
+}, _ref12 => {
+  let {
+    theme,
+    disabled,
+    readOnly,
+    checked
+  } = _ref12;
+  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+});
 
 export { StyledCheckBox, StyledContainer, StyledInput, StyledLabel };

package/esm/controlled-checkbox/utils/setMultipleRefs.js

@@ -1,3 +1,7 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
 function setMultipleRefs(refs) {
   return value => {
     refs.forEach(ref => {

package/esm/controlled-checkbox/utils/styleHelpers.js

@@ -1,7 +1,9 @@
 /* eslint-disable max-params */
-const handleCheckMarkColor = ({
-  colors
-}, disabled, readOnly, hasError, checked, isHovering) => {
+const handleCheckMarkColor = (_ref, disabled, readOnly, hasError, checked, isHovering) => {
+  let {
+    colors
+  } = _ref;
+
   if (hasError) {
     return colors.danger[900];
   }
@@ -16,38 +18,24 @@ const handleCheckMarkColor = ({
 
   return colors.brand[500];
 };
-const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
+const handleCheckmark = function (theme, checked, disabled, readOnly, hasError) {
+  let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+
   if (checked === 'mixed') {
-    return `&:before {
-      position: absolute;
-    content: '';
-    top: 6px;
-    left: 3px;
-    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-    width: ${theme.space.xxs};
-    height: 2px;
-    }`;
+    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
   }
 
   if (checked) {
-    return `&:before {
-      position: absolute;
-      content: '';
-          top: 3px;
-          left: 2px;
-          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          height: 5px;
-          width: 10px;
-          transform: rotate(-45deg);
-    }`;
+    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
   }
 
   return undefined;
 };
-const handleBackgroundColor = ({
-  colors
-}, disabled) => {
+const handleBackgroundColor = (_ref2, disabled) => {
+  let {
+    colors
+  } = _ref2;
+
   if (disabled) {
     return colors.neutral['080'];
   }

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 = () => {

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

@@ -36,6 +36,7 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   minutesInterval: 1,
   isClearable: false,
+  disabled: false,
   hasError: false,
   autoFocus: false,
   preventCloseOnSelection: false,
@@ -66,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,
@@ -74,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,
@@ -100,7 +110,8 @@ const defaultContext = {
   autoFocusHourTimeWheel: false,
   shouldPreserveClearableSpace: false,
   latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion
+  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
+  onGlobalKeyDown: noop
 };
 /** Context for cross component communication */
 

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

@@ -19,6 +19,11 @@ const ControlledDateTimePickerDatatestid = {
     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',
+    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',